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.

Click here to see the example show

. demo_transform1{-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg)}

Transform:skew ():

Meaning: Tilt;

Click here to see the example show

. demo_transform2{-webkit-transform:skew(20deg); -moz-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 "-".

Click here to see the example show

. demo_transform3{-webkit-transform:scale(1. 5); -moz-transform:scale(1. 5)}

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 "-".

Click here to see the example show

. demo_transform4{-webkit-transform:translate(120px,0); -moz-transform:translate(120px,0)}

Transform synthesis:

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

Click here to see the example show

.Demo_transform5{-webkit-transition:All1sEase-in-out;-moz-transition:All1sEase-in-out}
.Demo_transform5:Hover{-webkit-transform:Rotate(360deg)Skew( -20deg)Scale(3.0)  translate (100px,0; -moz-transform:rotate (360degskew (- 20deg scale (3 0)  translate (100px,0

CSS3 Detailed: Transform