4 functions of the Transform property in CSS3 (rotate, scale, tilt, move)

This article brings the content is about the CSS3 in the transform attribute implementation of 4 kinds of functions (rotation, scaling, tilt, move), there is a certain reference value, the need for friends can refer to, I hope to help you.

1 Transform Properties

In CSS3, you can use the transform function to rotate, scale, tilt, and move the 4 types of warp processing in a text or image.

(1) Browser support

So far: Safari3.1 above, Chrome8 above, Firefox4 above, Opera10 above the browser support this property.

2 rotation

Using the Rotate method, the angle value is added to the parameter, followed by the "deg" text that represents the angle unit, and the direction of rotation is clockwise.

Transform:rotate (45DEG);

3 Scaling

Use the scale method to achieve the scaling of text or images, specifying the magnification in the parameters.

Transform:scale (0.5);//reduce by half

(1) The magnification of the horizontal direction of the element can be specified separately and the magnification in the vertical direction

Transform:scale (0.5,2);//The horizontal direction is reduced by half, and the vertical direction is magnified one times.

4 Tilt

Use the skew method to skew the text or image, specifying the tilt angle in the horizontal direction and the tilt angle in the vertical direction respectively in the parameters.

Transform:skew (30deg,30deg);//Tilt 30 degrees horizontally and tilt 30 degrees in the vertical direction.

(1) Use only one parameter, omit another parameter

In this case, it is considered to be tilted only horizontally, not in the vertical direction.

Transform:skew (30DEG);

5 Mobile

Use the Translate method to move the text or image, specifying in the parameters the distance between the moving distance and the vertical direction in the horizontal direction respectively.

Transform:translate (50px,50px);//move 50px horizontally, 50px in the vertical direction

(1) Use only one parameter, omit another parameter

In this case, it is considered to move only in the horizontal direction and not move vertically.

Transform:translate (50px);

6 ways to use multiple variants of an element

Transform:translate (150px,200px) rotate (45deg) scale (1.5);

7 Specifying a datum point for the transformation

When using the transform method to deform text or images, the center point of the element is used to deform the datum point.

Transform-origin Property

Using this property, you can change the datum point of the deformation.

Transform:rotate (45deg); Transform-origin:left bottom;//changes the datum point to the lower-left corner of the element

(1) Specifying attribute values

The position of the datum point in the horizontal direction of the element: left, center, right

The position of the datum point in the vertical direction of the element: top, center, bottom

8 3D deformation function

(1) Rotation

Using the Rotatex method, the Rotatey method, the Rotatez method to rotate the elements around the x-axis, the y-axis, the z-axis, the angle value is added to the parameter, and the angle value is followed by the Deg text that represents the angle unit, and the rotation direction is clockwise.

Transform:rotatex (45deg); Transform:rotatey (45deg); Transform:rotatez (45deg); Transform:rotatex (45DEG) Rotatey (45deg) Rotatez (45deg), Transform:scale (0.5) Rotatey (45deg) Rotatez (45deg);

(2) Zoom

Using the ScaleX method, the ScaleY method, the Scalez method, the elements are scaled by the X, y, and z axes, and the magnification is specified in the parameters.

Transform:scalex (0.5); Transform:scaley (1); Transform:scalez (2); Transform:scalex (0.5) ScaleY (1); Transform:scale (0.5) Rotatey (45DEG);

(3) Tilt

Use the Skewx method, the Skewy method, to skew the element clockwise (no Skewz method) on the x-axis and y-axis, specifying the angle of inclination in the parameter

Transform:skewx (45deg); Transform:skewy (45deg);

(4) Mobile

Using the Translatex method, the Translatey method, the Translatez method, the element is moved in the x-axis, y-axis, z-axis direction, and the moving distance is added to the parameter.

Transform:translatex (50px); Transform:translatey (50px); Transform:translatez (50px);

9 Deformation matrix

There is a corresponding matrix behind each of the deformation methods.

(1) Calculate 2D deformation (3 X 3 matrix)

This 2D deformation matrix can be written as Matrim (A,b,c,d,e,f), and a~f represent a number that determines how the deformation process is performed.

(2) 2D matrix of translation

Consistent effect: Move right 150px, Move Down 150pxtransform:matrix (1,0,0,1,150,150); transform:translate (150px,150px);

(3) Calculate 3D deformation

4x4 matrix used for 3D scaling transformations

Transform:matrix3d (sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

The effect is the same: reduce the x-axis by one-fifth and halve in the y-axis direction. Transform:scale3d (0.8,0.5,1); Transform:matrix3d (0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

(4) Multiple deformations can be performed through a matrix

This processing can be achieved by multiplying the required deformation matrices and getting a new deformation matrix.