The related implementation steps of deformation attribute in CSS3

We know that the transform attribute in CSS3 is a change in the shape of the elements between 2D and 3D, so let's take a look at the Morph properties in CSS3 today.

Transform property, the most weight CSS3 change. Let the elements change shape in 2D and 3D.

Deformation

DEG represents degree (degrees), units can not be less, only deg units, no other units.

Rotate (angle) specifies the angle in the parameter

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

The skewx (angle) is tilted along the 2D tilt of the X-axis.

The Skewy (angle) is tilted along the Y-axis of the 2D tilt conversion.

Scale (x, y)

The 2D scaling transformation along the X and Y axes. Greater than 1: Zoom in, 0~1: Zoom out.

ScaleX (x) Sets the value of the x-axis to define the zoom transformation.

ScaleY (y) sets the value of the y-axis to define the zoom transformation.

Attention:

No deformation: transform:none;

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

3D variants

2013 Google launched the CHROME36, formally announced the CSS into the 3D era.

The Translate3d (x, y, z) transitions along the 3D axis of the X.

Translate space movement

TranslateX (x) conversion, just use the x-axis value.

Translatey (y) conversion, just use the y-axis value.

Translatez (z) 3D conversion, just use the z-axis value.

Rotate3d (X,y,z,angle) rotates along the 3D of the X, y, and Z axes.

Rotate rotation

Rotatex (angle) rotates along the 3D of the X-axis.

Rotatey (angle) rotates along the 3D of the Y-axis.

Rotatez (angle) rotates along the 3D of the Z axis.

Perspective (N) defines the Perspective view (depth of field) for the 3D transformation element.

Believe that you have read the above introduction, you have mastered the deformation of this piece of knowledge, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

Using CSS3 to make the gradual glow of the square border implementation steps

What are the browsers that require compatible authentication in HTML?

The use of Word-wrap attribute in CSS3 and examples