What this article brings to you is about the four functions (rotation, scaling, tilt, and movement) implemented by the transform attribute in CSS3. It has certain reference value. Friends in need can refer to it. Hope it helps.

1 transform attribute

In CSS3, you can use the transform function to achieve four types of deformation: rotation, scaling, tilting, and movement of text or images. deal with.

(1) Browser support

So far: Safari3.1 or above, Chrome8 or above, Firefox4 or above, Opera10 or above browsers support this attribute.

2 Rotate

Use the rotate method and add the angle value to the parameter. The angle value is followed by the "deg" text indicating the angle unit. Rotate The direction is clockwise.

3 Zoom

Use the scale method to implement scaling of text or images, and specify the scaling ratio in the parameters.

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

4 Tilt

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

(1) Only use one parameter and omit the other parameter

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

5 Move

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

(1) Only use one parameter and omit the other parameter

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

6 Use multiple deformation methods for an element

7 Specify the base point of deformation

When using When the transform method deforms text or images, it uses the center point of the element as the base point for deformation.

transform-origin attribute

Use this attribute to change the base point of deformation.

(1) Specify the attribute value

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

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

8 3D deformation function

(1) Rotation

Use rotateX method, rotateY method, rotateZ method respectively to surround the element To rotate the X-axis, Y-axis, and Z-axis, add the angle value to the parameters. The angle value is followed by the deg text indicating the angle unit. The rotation direction is clockwise.

(2) Scaling

Use the scaleX method, scaleY method, and scaleZ method respectively to scale the element according to the X-axis, Y-axis, and Z-axis, and specify the scaling ratio in the parameters.

(3) Tilt

Use the skewX method and skewY method respectively to tilt the element clockwise on the X-axis and Y-axis (no skewZ method), and specify the tilt in the parameters Angle

(4) Movement

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 movement in the parameters distance.

9 Transformation Matrix

There is a corresponding matrix behind each transformation method.

(1) Calculate 2D deformation (3 ,b,c,d,e,f), a~f all represent a number, used to decide how to perform deformation processing.

(2) Translation 2D matrix

(3) Calculate 3D deformation

4X4 matrix used for 3D scaling deformation

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

（4）可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。

相关推荐：

CSS3的transform属性_html/css_WEB-ITnose

CSS3的属性transition、animation、transform

The above is the detailed content of 4 functions implemented by the transform attribute in CSS3 (rotation, scaling, tilting, and moving). For more information, please follow other related articles on the PHP Chinese website!