Tutorial on using transform attribute in CSS3

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!