CSS3 Explanation: Transform

Recently, the development speed of HTML5 and CSS3 is very considerable, there are some major stations at home and abroad, cool station are using the latest technology. In the face of new technology, how can we correctly grasp and use the project in the future? In response to this problem, Hao son decided to analyze CSS3, one by one like the students to answer CSS3 is a god horse thing. have already transform start, write bad words, please seriously shoot bricks!!

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 ) -moz-transform : rotate ) }

Transform:skew ():

Meaning: Tilt;

demo_transform2 { -webkit-transform : skew ) -moz-transform : skew ) }

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: All1sEase-in-out;-moz-transition: All1sEase-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)}

CSS3 Explanation: Transform