Tutorial on using Transform properties in CSS3

This time, let's take a look. The Transform property, which is the most weight-CSS3 property that changes shape properties, allows elements to change back and forth before 2D and 3D.

1, 2D 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);

2, 3D deformation

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 seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

The Border-image attribute in CSS3 is described in detail

Use JS and HTML to make a simple artboard code

Tutorial on using Word-break properties in CSS3