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!