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< Span class= "Css-value" style= "color: #770088;" > (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< Span class= "Css-value" style= "color: #770088;" > ( -20degscale (3.0) translate< Span class= "Css-value" style= "color: #770088;" > (100px,0)
CSS3 Detailed: Transform