CSS3 details: transform, css3 details transform

CSS3 details: transform, css3 details transform
What is CSS3 transform?

Transform means: change, make... Deformation and conversion

What are common attributes of CSS3 transform?

Transform attributes include: rotate ()/skew ()/scale ()/translate (,), and x and y, for example, rotatex () and rotatey (), and so on.

The following describes the usage of each attribute:

Transform: rotate ():

Description: rotation. "deg" indicates "degree", for example, "10deg" indicates "10 degrees.

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

 

Transform: skew ():

Description: skew;

. Demo_transform2 {-webkit-transform: skew (20deg );

 

Transform: scale ():

Meaning: proportion; "1.5" indicates that the proportion is increased by 1.5. If you want to enlarge it by 2 times, you must write it as "2.0", and then scale it down to "-".

. Demo_transform3 {-webkit-transform: scale

 

Transform: translate ():

Meaning: Change, displacement; the following shows a 120-pixel Shift to the right. If the shift is upward, you can change the value of "0" to the next value. If the shift to the left is negative "-".

. Demo_transform4 {-webkit-transform: translate

 

Transform integration:

These are the common attributes of transform. The following uses the help of transition to demonstrate a comprehensive example of css3 transform:

. Demo_transform5 {-webkit-transition: all 1 s records-in-out;-moz-transition: all 1 s records-in-out}
. Demo_transform5: hover {-webkit-transform: rotate (360deg) skew-ms-transform: rotate (7deg); //-ms represents the ie kernel Identifier-moz-transform: rotate (7deg); //-moz represents Firefox kernel Identifier-webkit-transform: rotate (7deg); //-webkit represents Google kernel Identifier-o-transform: rotate (7deg); //-o represents the [opera] kernel identifier transform: rotate (7deg); // unified identification statement... It is best to write this sentence in line with w3c standards.