Relevant implementation steps of deformation properties in CSS3

We know that the transform attribute in CSS3 allows the element to change its shape between 2D and 3D, then Today we will talk about the deformation attribute in CSS3.

Transform attribute, the most important CSS3 change. Let elements change shape in 2D and 3D.

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);

3D deformation

In 2013, Google launched Chrome36, officially announcing CSS 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 that after reading the above introduction, you have mastered the knowledge about deformation. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Steps to implement using CSS3 to create a gradually glowing square border

HTML requires compatibility verification What browsers are there

Detailed explanation and examples of the use of word-wrap attribute in Css3

The above is the detailed content of Relevant implementation steps of deformation properties in CSS3. For more information, please follow other related articles on the PHP Chinese website!