CSS3 details: transform

Recently, HTML5 and CSS3 are still growing at a considerable speed. There are some major sites at home and abroad, and cool is using the latest technology. How can we correctly grasp and use new technologies in future project practices? To address this issue, Hao decided to analyze CSS3, and answer the question that CSS3 is a magic horse. Let's start with transform. If the writing is not good, please make a lot of bricks !! What is CSS3 transform? Transform means: change, make... Deformation; what are the common attributes of conversion CSS3 transform? Transform attributes include: rotate ()/skew ()/scale ()/translate (,), and x and y, for example, rotatex () and rotatey (), and so on. Next we will break down the usage of each attribute: transform: rotate (): Meaning: rotation; where "deg" indicates "degree, for example, "10deg" indicates "10 degrees.. Demo_transform1 {-webkit-transform: rotate (10deg);-moz-transform: rotate (10deg)} transform: skew (): Meaning: Tilt ;. demo_transform2 {-webkit-transform: skew (20deg);-moz-transform: skew (20deg)} transform: scale (): Meaning: proportion; "1.5" indicates a scale-up of 1.5. If you want to scale up 2 times, you must write "2.0" and the scale-down is negative "-".. Demo_transform3 {-webkit-transform: scale (1.5);-moz-transform: scale (1.5)} transform: translate (): Meaning: Change, shift; the following shows the 120-pixel Shift to the right. If it is upward, you can change the value of "0" to the next value. If it is downward, It is negative "-".. Demo_transform4 {-webkit-transform: translate (120px, 0);-moz-transform: translate (120px, 0)} transform Synthesis: these are the common attributes of transform, the following uses transition to demonstrate a comprehensive css3 transform instance :. 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 (-20deg) scale (3.0) translate (100px, 0);-moz-transform: rotate (360deg) skew (-20deg) scale (3.0) translate (100px, 0 )}