Proficient in css3-transform (on)

Let's first think about how css3 is implemented. Today we will share with you the tips for making a css clock.

Step 1: first understand the basics of transform and skip it.

Transform, because it has not yet become w3c standard, all use, Each browser version defines the style name as follows:

1. google chrome:-webkit-transform 2. mozilla firefox:-moz-transform: 3. opera:-o-transform: 4.IE filter

For example:

1 -o-transform: rotate(40deg); /* opera*/2 -webkit-transform: rotate(40deg);/* chrome*/3 -moz-transform: rotate(40deg);/* firefox*/4 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777,5 M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";/*IE*/

About the filter: as long as you want to rotate the angleRoationYou can use the corresponding function to calculate the value.

1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

Transform attributes include: rotate ()/skew ()/scale ()/translate ()/matrix, and x and y, for example, rotatex () and rotatey (), and so on.

1. rotate: horizontal rotation. The attribute value format is Xdeg. (Deg means "degree") rotate (Xdeg ). If X is positive, it rotates clockwise. If X is negative, it rotates counterclockwise.

2. translate: positioning element. The element is located based on the XY axis. Translate (Xpx, Ypx ). If the attribute value is one, the x and Y axes parameters are the same. If the attribute values are two, the x and Y axes are located separately.

Note: x and y indicate right and move down; otherwise, the opposite is true.

3. scale: scale. 1 is the original size. Scale (x ). Enlarge positive numbers and reduce negative numbers. When the attribute value is one, the x/y axis scales simultaneously. When the attribute value is two, the zooming of the x and Y axes is controlled respectively.

4. skew: skew and deformation of elements along the horizontal direction. Skew (Xdeg, Ydeg ). This is hard to express. Imagine a parallelogram. If the attribute value is one, the x and Y axes parameters are the same. If the attribute values are two, the x and Y axes are skewed to the matrix, with six values.

Step 2: Let's learn how to locate 12 time points.

After getting familiar with the basic usage, we start to take an advanced level. There are many Implementation ideas here. We can use layers to implement them using lists. Set the basic style first.

1/* style */2 <style> 3 ul {margin: 0; padding: 0px;} 4 # container li {5 display: inline-block; 6 font-size: 18px; 7 font-weight: bold; 8 font-family: "Segoe UI"; 9 text-shadow: # E8E8E8 2px 2px 1px; 10} 11 </style> 12/* container */13 <div id = "container"> 14 <ul> 15 <li> 12 </li> 16 <li> 1 </li> 17 <li> 2 </li> 18 <li> 3 </li> 19 <li> 4 </li> 20 <li> 5 </li> 21 <li> 6 </li> 22 <li> 7 </li> 23 <li> 8 </li> 24 <li> 9 </li> 25 <li> 10 </li> 26 <li> 11 </li> 27 </ul> 28 </div>

The effect should be very neat queue: 12 1 2 3... 11. So far, there have been no signs of rotation. Now we need to use transform. Because we like Google, we will first use Google browser for testing. We will write three time styles.

1      #container li:nth-child(1){-webkit-transform:translate(87px,23px);}2      #container li:nth-child(2){-webkit-transform:rotate(30deg) translate(104px,-23px);}3      #container li:nth-child(3){-webkit-transform:rotate(60deg) translate(104px,-56px);}

Check whether the effect is amazing during running. I started to turn around. Careful people noticed that two of the above three styles used two attributes: rotate () and translate (), in addition, a pseudo-class selector nth-child (an + n) is used. Here, the index is interpreted as the number of li. More detailed understanding can read this article http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html, continue to our topic, these two functions are used together in the calculation of time point position, we need to understand, why down offset, the value of translate is negative. Here there is a priority problem. First render rotate () and then locate it. So it is not hard to understand. After rendering, the x and Y axes also rotate, so at this level, we can understand that it is moving up and positioning. After understanding this point, the following points will be well positioned.

1      #container li:nth-child(4){-webkit-transform:rotate(90deg) translate(97px,-95px);}2      #container li:nth-child(5){-webkit-transform:rotate(120deg) translate(78px,-120px);}3      #container li:nth-child(6){-webkit-transform:rotate(150deg) translate(50px,-142px);}4      #container li:nth-child(7){-webkit-transform:rotate(180deg) translate(23px,-160px);}5      #container li:nth-child(8){-webkit-transform:rotate(210deg) translate(-10px,-168px);}6      #container li:nth-child(9){-webkit-transform:rotate(240deg) translate(-55px,-168px);}7      #container li:nth-child(10){-webkit-transform:rotate(270deg) translate(-100px,-148px);}8      #container li:nth-child(11){-webkit-transform:rotate(300deg) translate(-140px,-110px);}9      #container li:nth-child(12){-webkit-transform:rotate(330deg) translate(-165px,-55px);}

The effect looks like the font is skewed. If it is not used to skillfully mix rotate and translate, it is enough to use translate. Due to space limitations, we will continue to explain in the next article.