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

This article mainly explains "how to transform 2D in css3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to transform 2D in css3.

2D conversion

Translate () indicates moving from its current position to the set value, setting the left value and the top value

Translate (100pxMagol 30px) / / move 100px from the left and 30px from top to bottom

Rotate () represents the angle at which the element rotates clockwise, and when it is negative, it rotates counterclockwise.

Rotate (30deg) / / rotate 30 degrees clockwise

Scale () indicates that the size of the element increases or decreases the set width (X axis) and height (Y axis)

Scale (3) 4) / / double the width and quadruple the height

Skew () represents the angle set by the element flip, setting the X and Y axes

Skew (30 deg) / / flip the element 30 degrees along the X axis and 20 degrees along the Y axis

Matrix ()

The matrix () method is a general 2D method that contains mathematical functions, rotate, scale, move, and tilt.

Matrix (0.866, 0.50, 0.85, 0.85, 0.866, 0, 0)

Example:

/ * run under chrome browser * /

Div

{

Width:200px

Height:100px

Text-align:center

Line-height:100px

Background-color:pink

-webkit-transform:translateX (150px); / * X axis moves 150px*/

-webkit-transform:rotate (- 50deg); / * rotate 50 degrees counterclockwise * /

-webkit-transform:skew (20degrecom 20deg); / * rotate 20 degrees along the X axis, Y axis * /

}

Effect picture

At this point, I believe you have a deeper understanding of "how to transform 2D in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.