Detailed explanation of CSS3: transform_html/css_WEB-ITnose

What is CSS3 transform?

transform means: change, deform...; transform

What are the common properties of CSS3 transform?

The attributes of transform include: rotate() / skew() / scale() / translate(,), which are divided into x and y respectively, such as: rotatex() and rotatey(), And so on.

Let’s break down the usage of each attribute:

transform:rotate():

Meaning: rotation; where "deg" means "degree", such as " 10deg" means "10 degrees", the same below.

Click here to view an example

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

transform:skew( ):

Meaning: skew;

Click here to view an example display

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg )}

transform:scale():

Meaning: Proportion; "1.5" means enlarging at a ratio of 1.5. If you want to enlarge by 2 times, you must write "2.0", and it is negative if you want to enlarge by 2 times. "-".

Click here to view an example

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

transform:translate( ):

Meaning: change, displacement; the following means a displacement of 120 pixels to the right. If the displacement is upward, just change the "0" at the end to a different value. The displacement to the left and downward is a negative "-".

Click here to view the example display

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

Transform synthesis:

These are the common attributes of transform. Let's use the help of transition to demonstrate a comprehensive example of css3 transform:

Click here to view the example display

.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)}