Four functions of transform attribute in CSS3

Time:2022-5-10

In CSS3, the transform function can be used to realize the four types of deformation processing of text or image rotation, scaling, tilting and moving.

1. Browser support

So far: Safari 3 Browsers above 1, chrome 8, Firefox 4 and Opera 10 support this attribute.

2. Spin

Use the rotate method to add an angle value to the parameter. The angle value can be followed by the “DEG” text representing the angle unit. The rotation direction is clockwise.


transform:rotate(45deg);

3. Zoom

Use the scale method to realize the scaling processing of text or image, and specify the scaling magnification in the parameters.

transform:scale(0.5);// Halve

(1) You can specify the magnification in the horizontal direction and the magnification in the vertical direction of the element respectively

transform:scale(0.5,2);// Halve horizontally and double vertically.

4. Tilt

Skew method is used to realize the tilt processing of text or image. The tilt angle in the horizontal direction and the tilt angle in the vertical direction are specified in the parameters respectively.

transform:skew(30deg,30deg);// Tilt 30 degrees horizontally and 30 degrees vertically.

(1) Use only one parameter and omit the other

In this case, it is regarded as tilting only in the horizontal direction and not in the vertical direction.


transform:skew(30deg);

5. Move

Use the translate method to move the text or image, and specify the moving distance in the horizontal direction and the moving distance in the vertical direction in the parameters.

transform:translate(50px,50px);// Move 50px horizontally and 50px vertically

(1) Use only one parameter and omit the other

In this case, it is regarded as moving only in the horizontal direction and not in the vertical direction.


transform:translate(50px);

6. Methods of using multiple deformations on an element


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

7. Specifies the base point of the deformation

When using the transform method to deform text or image, the center point of the element is used as the reference point for deformation.

Transform origin attribute

Using this attribute, you can change the base point of the deformation.

transform:rotate(45deg);
transform-origin:leftbottom;// Change the base point to the lower left corner of the element

(1) Specify attribute value
Position of datum point in the horizontal direction of element: left, center, right
The position of the datum point in the vertical direction of the element: top, center and bottom

8. 3D deformation function

(1) Spin

Use the rotatex method, rotatey method and rotatez method to rotate the element around the x-axis, Y-axis and z-axis respectively. Add the angle value in the parameter. The angle value is followed by the DEG text representing the angle unit. 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

Use scaleX method, Scaley method and scalez method respectively to scale the elements according to X axis, Y axis and Z axis, and specify the scaling factor 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 and the skewy method respectively to tilt the element clockwise on the x-axis and y-axis (without the skewz method), and specify the tilt angle in the parameter


transform:skewX(45deg);
transform:skewY(45deg);

(4) Move

Use the translatex method, translatey method and translatez method respectively to move the element in the x-axis, Y-axis and z-axis directions, and add the moving distance to the parameters.


transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);

9. Deformation matrix

There is a corresponding matrix behind each deformation method.

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


\begin{bmatrix}a&c&e\\b&d&f\

\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}
&0&1\end{bmatrix}

This 2D deformation matrix can be written as matrix (a, B, C, D, e, f). A ~ F represent a number, which is used to decide how to perform deformation processing.

(2) Translated 2D matrix

\begin{bmatrix}1&0&tx\
\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
//The effect is the same: move 150px right and 150px down
transform:matrix(1,0,0,1,150,150);
transform:translate(150px,150px);
&1&ty\
\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
//The effect is the same: move 150px right and 150px down
transform:matrix(1,0,0,1,150,150);
transform:translate(150px,150px);
&0&1\end{bmatrix} //The effect is the same: move 150px right and 150px down transform:matrix(1,0,0,1,150,150); transform:translate(150px,150px);

(3) Calculate 3D deformation

4X4 matrix used for 3D scaling deformation

\begin{bmatrix}sx&0&0&0\
\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//The effect is the same: it is reduced by one fifth in the x-axis direction and half 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);
&sy&0&0\
\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//The effect is the same: it is reduced by one fifth in the x-axis direction and half 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);
&0&sz&0\
\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//The effect is the same: it is reduced by one fifth in the x-axis direction and half 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);
&0&0&1\end{bmatrix} transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1); //The effect is the same: it is reduced by one fifth in the x-axis direction and half 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 deformation processing can be performed through the matrix

This processing can be realized by multiplying the required deformation matrix to obtain a new deformation matrix.

This is the end of this article about the four functions implemented by the transform attribute in CSS3. For more information about the implementation of the transform attribute in CSS3, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!