CSS3 detailed explanation: transform

What is CSS3 transform?

The meaning of transform is: change, deform...; transform

What are the common properties of CSS3 transform?

The properties 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.

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

transform:skew( ):

Meaning: skew;

.demo_transform2{-webkit-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 if you want to zoom out, it is negative "-".

.demo_transform3{-webkit-transform:scale

transform:translate():

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

.demo_transform4{-webkit-transform:translate

transform synthesis:

These are the common attributes of transform. Below we use the help of transition 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

-ms-transform:rotate(7deg); ms represents the ie kernel identification code

-moz-transform:rotate(7deg);                                                                                  . webkit represents the Google kernel identification code

-o-transform:rotate(7deg);                                                                                                       use using it. Unified identification statement. . . It is best to write this sentence down, in line with w3c standards

For more detailed explanations of CSS3: transform For related articles, please pay attention to the PHP Chinese website!