The css transform transformation

If you want to see the effect of the change, to give a graphical box set transition transition: 3s

1. Displacement

Syntax: Transform: Translate (X, Y);

Where x represents the displacement in the horizontal direction (left-right), Y represents the displacement in the vertical direction (i.e., vertical).

You can only have a maximum of two values in parentheses, when time is only a representation of the value of horizontal displacement .

The size of the value can be positive , or may be negative . When the value is negative is moved in the opposite direction.

Unit values may be pixel (e.g. 100px, -100px), may be a percentage (e.g. 50% - 50%). When the value is expressed as a percentage, with reference to the size of the box elements located translate.

translate property is not off the mark!

2. Rotate

Syntax: the Transform: Rotate ();

In the parentheses represents the angle of rotation, the unit must be used deg.

When the value in the parentheses positive, indicating a clockwise rotation; is negative, counterclockwise rotation.

3. The origin of rotation is provided

Syntax: Transform-Origin: XY;

x represents the horizontal direction, the orientation value may be set to the value of left, center, right; or the pixel PX; percent or%.

y represents the vertical direction, the orientation value may be set to a value top, center, bottom; or the pixel PX; percent or%.

When x or y is negative, the origin of rotation out of the box.

The default location for the origin of rotation box central point : center center. (Separated by spaces between x and y.)

1  <! - when the mouse enters the box path, Wheels automatically rotated to the right; mouse out recovery Hot Wheels -> 
2  < body > 
. 3       < div class = "path" >  
. 4          < div class = " Wheel " > Hot Wheels </ div >  
. 5      </ div > 
. 6  </ body > 
. 7  
. 8  < style > 
. 9  / * style omitted and Hot Wheels style path provided into the box when the mouse * / 
10      .path : hover.Wheel { 
. 11          / * Translate () is only a value indicating the horizontal movement, does not move up and down * /
12 is          / * Rotate set () indicates the degree of rotation for ten laps 3600 * / 
13 is          Transform : Translate (1000px) Rotate (3600deg) ; 
14      } 
15  </ style >

If both displaced and also rotate, must be provided in the same attribute a plurality of transform, separated by spaces, can be written as two separate transform.

Because the pattern will overlap the two separate languages, show last defined transform.

4. Zoom

Syntax: Transform: Scale (X, Y);

x represents the horizontal direction (the width of the pattern change), Y represents the vertical direction (height change pattern). When only one value in parentheses, the synchronization pattern width and height transformation.

Parentheses are numbers of positive and negative values :( pattern does not affect the transformation)

Value = 0, the graphics disappear;
0 <value <1, the original pattern is reduced several times;
Value = 1, the same pattern;
Values> 1, enlarged to the original pattern several times;

5. inclined

Syntax: Transform: skew (X, Y);

x represents the left inclination (left and right), while maintaining the upper and lower two levels (common).

y represents the vertical tilt (upper and lower), right and left two sides remain vertical. Only when a default value of about tilt.

The value of the unit is deg , represents inclination. As 60deg.

If you want something inside the box is not inclined to justify separate: the content tag to the word, and then set the transform: the parent value of the negative value of the tag (in the) skew.

(If added to the digital content label such as inline elements span, with the need to display: block or display: inline-block to convert the block-level element or element row blocks.)

Tilt the navigation bar Case:

1  <! - graphically inclined instead of a background image can load faster -> 
2  < body > 
. 3      < UL > 
. 4          < Li > 
. 5              < A the href = "#" > 
. 6                  < span > First 1 </ span > 
. 7              </ A > 
. 8          </ Li > 
. 9          < Li > 
10              < A the href = "#" > 
. 11                  < span > First 2 </span>
12             </a>
13         </li>
14         <li>
15             <a href="#">
16                 <span>首页3</span>
17             </a>
18         </li>
19         <li>
20             <a href="#">
21                 <span>首页4</span>
22             </a>
23         </li>
24         <li>
25             <a href="#">
26                 <span>首页5</span>
27             </a>
28         </li>
29         <li>
30             <a href="#">
31                 <span>首页6</span>
32             </a>
33         </ 34>Li
     </ Ul > 
35  </ body > 
36  
37 [  < style > 
38 is      / * CSS style omitted ul and a label set * / 
39      Li { 
40          a float : left ; 
41 is          background : Black ; 
42 is          margin-right : 20px ; 
43 is          Transform : skew (-20deg) ; 
44 is      } 
45      Li A span { 
46 is          the display : Block ;
47         transform: skew(20deg);
48     }
49 </style>

6. box centered summary

Center box to use "the father of the child must phase." which is:

Child element set position: absolute; parent element set position: relative; then set the left, top, margin equivalent:

1）　 left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

2) nerve: 50%;

top: 50%;

margin-left: - half their width;

margin-top: - half their width;

3）　 left: 50%;

top: 50%;

transform: translate(-50%, -50%);