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);-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 "-".
. 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 "-".
. 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:
. demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-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)}
What is CSS3 transform?