1. Write directly in the style, such as a small arrow,transform:rotate (135deg) can
2. Write the animation process,@keyframes and transform and animation together with
Written in @keyframes minify{
0%{
Transform:scale (1);
-webkit-transform (1);
}
100%{
left:300px;
top:300px;
Transform:scale (0.3);
-webkit-transform (0.3);
}
}, and then write animation:minify in the style . 3s forwards;
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,< Span class= "css-unit" style= "color: #228811" >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(360deg) skew( -20deg)scale(3. 0) translate(100px,0)}
CSS3 Animation 2 (Transform usage)