Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to implement the transform attribute in css3. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

1transform attribute

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

(1) browser support

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

2 rotation

Using the rotate method, add an angle value to the parameter, followed by the "deg" text that represents the angle unit, and the rotation direction is clockwise.

Transform:rotate (45deg)

3 Zoom

Use the scale method to scale the text or image, and specify the zoom ratio in the parameters.

Transform:scale (0.5); / / halved

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

Transform:scale (0.5) / / halved horizontally and twice magnified vertically.

4 tilt

Use skew method to realize the tilt processing of text or image, and specify the tilt angle in the horizontal direction and the tilt angle in the vertical direction respectively in the parameters.

Transform:skew (30deg); / / inclines 30 degrees horizontally and 30 degrees vertically.

(1) use only 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.

Transform:skew (30deg)

5 Mobility

Use the translate method to move the text or image, specifying the distance to move horizontally and vertically in the parameters.

Transform:translate (50pxMagol 50px); / / move 50px horizontally and 50px vertically

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

In this case, it is regarded as moving only horizontally and not vertically.

Transform:translate (50px)

6 use multiple deformation methods for an element

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

7 specify the base point of the deformation

When using the transform method for text or image deformation, the deformation is based on the center point of the element.

Transform-origin attribute

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

Transform:rotate (45deg)

Transform-origin:leftbottom;// changes the base point to the lower left corner of the element

(1) specify the attribute value

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

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

83D deformation function

(1) rotation

Use rotateX method, rotateY method and rotateZ method to rotate the element around the X axis, Y axis and Z axis respectively, and add the angle value to the parameter. 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

Use the scaleX method, the scaleY method, and the scaleZ method to scale the element according to 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 the skewY method to tilt the element clockwise on the X axis and Y axis (without skewZ method), and specify the tilt angle in the parameters.

Transform:skewX (45deg)

Transform:skewY (45deg)

(4) move

TranslateX method, translateY method and translateZ method are used to make the element move in the direction of X axis, Y axis and Z axis, and the moving distance is added in 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 (3X3 matrix)

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

This 2D deformation matrix can be written as matrim (a _ r _ b _ r _ c _ d _ r _ e _ ref), each of which represents a number that determines how to perform deformation processing.

(2) Translational 2D matrix

\ begin {bmatrix} 1&0&tx\\ 0&1&ty\\ 0room1\ end {bmatrix}

/ / the effect is consistent: move 150px to the right, move 150px down

Transform:matrix (1pd0re0j0pl 1150150)

Transform:translate (150px150px)

(3) calculate 3D deformation

4X4 matrix used for 3D scaling deformation

\ begin {bmatrix} sx&0&0&0\\ 0&sy&0&0\\ 0&0&sz&0\\ 0,0,0,0,0,0,0,0,0,0,0,0,0,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 consistent: 1/5 in the X axis and half in the Y axis.

Transform:scale3d (0.8, 0.5)

Transform:matrix3d (0.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0. 5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1).

(4) multiple deformation processing can be performed through matrix.

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

The above is all the content of the article "how to implement the transform attribute in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.