Transform variants in CSS3 compatible with IE

In the CSS3, with the transform function can realize the text or image rotation, scaling, tilt, move the four types of deformation, these four variants using rotate, scale, skew and translate four methods to achieve. Using these four variants together will produce different effects, with different order of use, and the effect is not the same.

Current browser support situation: Safari 3.1+, Chrome 8+, Firefox 4+, Opera + +, ie9+

　　First, Rotation:

CSS uses the rotate method to implement the rotation of the element, adding an angular value to the parameter and rotating it clockwise.

Example one: A yellow div element that, by using "transform:rotate (45deg)" in the style code, rotates the DIV element 45 degrees clockwise. DEG is an angular unit defined in the "Values and Units" module of CSS3.

　　Code Listing 1:

1 <! DOCTYPE html>
 2 
 
Running results (Chrome 14):


　Second, zoom:

　　 The scale method implements the zoom effect of the text or image, specifying the magnification in the parameter, for example: "Scale(0.5)" means 50% smaller, the argument can be an integer, or it can be a decimal.

Example two: reduce a DIV element by 50%

　　Code Listing 2:

<! DOCTYPE html>
 
Running results (Chrome 14):


　　third, tilt:

Use the skew method to achieve the tilt of the text or image, specifying the tilt angle in the horizontal direction and the tilt angle in the vertical direction respectively in the parameters. For example, "skew (30deg, 30deg)" means tilt 30 degrees horizontally, and tilt 30 degrees in the vertical direction,

Example three: Tilt a div element horizontally by 30 degrees, and tilt 30 degrees in the vertical direction.

　　Code Listing 3:

<! DOCTYPE html>
 
Running results (Chrome 14):


Note: The two parameters in the skew method can be modified to use only one parameter, omitting another parameter, which is not to say horizontal and vertical, which is considered to be tilted horizontally and not tilted vertically. 

Look at the results of the operation:


　　Four, Mobile:

Use the translate method to move the text or image, specifying the distance between the moving distance and the vertical direction of the horizontal direction in the parameters. For example, "translate (50px, 50px)" represents moving 50 pixels horizontally, and 50 pixels in a vertical direction.

Example four: Move a DIV element horizontally 50 pixels, moving vertically 50 pixels.

　　Code Listing 4:

<! DOCTYPE html>
 
Running results (Firefox 7):


Note: The two parameters in the Translate method can also be modified to use only one parameter, similar to the skew method, omitting another parameter, which is considered to be moving horizontally only and not moving in the vertical direction. 

Running results (Firefox 7):


　　a method that uses multiple transformations on an element:

Example five: For a DIV element, move first (move 150px to the right, move 200px down), then rotate (45 degrees clockwise), and last zoom (1.5 times times magnification).

Code Listing 5:

<! DOCTYPE html>
 
Running results (Chrome 14):


Let's adjust the sequence of several variants in the code above, rotate (45 degrees clockwise), then zoom (1.5 times times), move (move 150px to the right, move 200px down), and see what the results are:

Code Listing 6:

<! DOCTYPE html>