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.

Click here to view the instance display

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

Transform: skew ():

Description: skew;

Click here to view the instance display

.demo_transform2{-webkit-transform:skew(20deg);-moz-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 "-".

Click here to view the instance display

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

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 "-".

Click here to view the instance display

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

Transform integration:

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

Click here to view the instance 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)}