Home  >  Article  >  Web Front-end  >  Tutorial on using transform attribute in CSS3

Tutorial on using transform attribute in CSS3

php中世界最好的语言
php中世界最好的语言Original
2017-11-30 15:52:292352browse

This time let’s talk about the transform attribute, which is the most important attribute of CSS3 to change the shape characteristics, allowing the element to change back and forth between 2D and 3D.

1. 2D deformation

deg represents degree (degree), the unit cannot be less, there is only deg unit, no other units.

rotate(angle) specifies the angle in the parameter

skew(x-angle,y-angle) 2D tilt transformation along the X and Y axes.

skewX(angle) 2D skew transformation along the X axis.

skewY(angle) 2D skew transformation along the Y axis.

scale(x,y)

2D scaling transformation along the X and Y axes. Greater than 1: enlarge, 0~1: reduce.

scaleX(x) sets the value of the X axis to define the scaling transformation.

scaleY(y) sets the value of the Y axis to define the scaling transformation.

Note:

No transformation: transform:none;

Multiple transformations are separated by spaces. ef: transform:scale(0.5) skew(10deg,20deg) rotate(30deg);

2. 3D deformation

In 2013, Google launched Chrome36, which was officially Announced that CSS has entered the 3D era.

translate3d(x,y,z) 3D transformation along the X, Y and Z axes.

translate Spatial movement

translateX(x) conversion, just use the value of the X axis.

translateY(y) conversion, just use the value of the Y axis.

translateZ(z) 3D conversion, just use the value of the Z axis.

rotate3d(x,y,z,angle) 3D rotation along the X, Y and Z axes.

rotate rotation

rotateX(angle) 3D rotation along the X axis.

rotateY(angle) 3D rotation along the Y axis.

rotateZ(angle) 3D rotation along the Z axis.

perspective(n) Defines the perspective View (depth of field) for the 3D transformation element.


I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed introduction to the border-image attribute in Css3

Use JS and html to make a simple drawing board Code

#Tutorial on using the word-break attribute in css3

The above is the detailed content of Tutorial on using transform attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn