CSS3 Explanation: Transform

What is CSS3 transform?

The meaning of transform is: change, make ... to transform;

What are the common properties of CSS3 transform?

The properties of transform include: rotate ()/skew ()/scale ()/translate (,), and also X, Y, for example: Rotatex () and Rotatey (), and so on.

Let's break down the usage of each attribute:

Transform:rotate ():

Meaning: rotation, wherein "deg" is the meaning of "degree", such as "10deg" means "10 degrees" the same as below.

. Demo_transform1{-webkit-transform:rotate (10deg);-moz-transform:rotate (10DEG)

Transform:skew ():

Meaning: Tilt;

. Demo_transform2{-webkit-transform:skew (20DEG);

Transform:scale ():

Meaning: proportion; "1.5" means to enlarge by 1.5, if you want to enlarge twice times, you should write "2.0" and reduce the negative "-".

. Demo_transform3{-webkit-transform:scale

Transform:translate ():

Meaning: change, displacement; The following means that the right displacement of 120 pixels, if the upward displacement, the back of the "0" to change the value of the line, the left downward displacement is negative "-".

. demo_transform4{-webkit-transform:translate

Transform synthesis:

The common properties of transform are these, and here we use transition's help to demonstrate a comprehensive example of CSS3 transform:

. demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
. Demo_transform5:hover{-webkit-transform:rotate (360deg) skew

-ms-transform:rotate (7DEG); -ms on behalf of IE kernel Identification code

-moz-transform:rotate (7DEG); -moz on behalf of the Firefox kernel identification code

-webkit-transform:rotate (7DEG); -webkit on behalf of Google kernel identification code

-o-transform:rotate (7DEG); -O stands for open gate "opera" Kernel ID

Transform:rotate (7DEG); Unified Identity Statement ... It's best to write it down, in line with the standards.