4 functions implemented by the transform attribute in CSS3

In CSS3, the transform function can be used to implement four types of deformation processing of text or images: rotation, scaling, tilting, and movement.

1. Browser support

So far: Safari 3.1 and above, Chrome 8 and above, Firefox 4 and above, Opera 10 and above browsers support this property.

2. Rotation

Use the rotate method, add the angle value in the parameter, followed by the word "deg" indicating the angle unit, and the rotation direction is clockwise.

transform: rotate(45deg);

3. Zoom

Use the scale method to scale text or images, and specify the scaling factor in the parameter.

transform:scale(0.5); //Shrink by half

(1) You can specify the horizontal and vertical magnification of an element separately.

transform:scale(0.5, 2); //Shrink in half horizontally and double vertically.

4. Tilt

Use the skew method to implement the skew processing of text or images, and specify the skew angle in the horizontal direction and the skew angle in the vertical direction in the parameters.

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

(1) Use only one parameter and omit the other parameter

In this case, it is considered that the tilt is only in the horizontal direction and not in the vertical direction.

transform:skew(30deg);

5. Mobile

Use the translate method to move text or images, specifying the horizontal and vertical moving distances in the parameters.

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

(1) Use only one parameter and omit the other parameter

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

transform: translate(50px);

6. Use multiple deformation methods for one element

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

7. Specify the base point of deformation

When using the transform method to deform text or images, the deformation is performed based on the center point of the element.

transform-origin property

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

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

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

8. 3D deformation function

(1) Rotation

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, followed by the word deg 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) Scaling

Use the scaleX method, scaleY method, and scaleZ method to scale the element along the X-axis, Y-axis, and Z-axis respectively, and specify the scaling ratio 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 skewY method to tilt the element clockwise on the X axis and Y axis respectively (no skewZ method), and specify the tilt angle in the parameter

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

(4) Mobile

Use the translateX method, translateY method, and translateZ method to move the element in the X-axis, Y-axis, and Z-axis directions respectively, and add the moving distance to the parameter.

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

9. Deformation Matrix

Behind each deformation method there is a corresponding matrix.

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

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

This 2D deformation matrix can be written as matrim(a,b,c,d,e,f), where a~f each represents a number that determines how to perform the deformation process.

(2) 2D matrix of translation

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

(3) Calculating 3D deformation

4X4 matrix used for 3D scaling and deformation

\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: reduce by one fifth along the X axis and reduce by half along the Y axis.
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 can be achieved 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 relevant content on the implementation of the transform attribute in CSS3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!