精通css3-transform(上）

  先請思考，css3如何?,今天就來跟大家分享下製作一個css時鐘的技巧。

 第一步：先瞭解transform基礎，熟悉的跳過。

            transform，因為還沒有成為w3c的標準，所有使用中，各瀏覽器版本定義樣式名稱如下：

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

                  例如：

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*/

            　　關於濾鏡的說明：只要把你需要旋轉的角度roation值用相應Function Compute出來就可以了

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

            transform的屬性包括：rotate() / skew() / scale() / translate() /matrix，分別還有x、y之分，比如：rotatex() 和rotatey() ，以此類推。

                      1.rotate：水平旋轉，屬性值格式為Xdeg。(deg是“度”的意思)rotate(Xdeg)。X為正數時，順時針旋轉；為負數時，逆時針旋轉

                      2.translate：定位元素，基於XY軸重新置放元素。translate(Xpx,Ypx)。屬性值為一個時，x、y軸參數相同；為兩個時，x、y軸分別定位。

                               特別注意：x,y 為正 表示右，下移，否則相反。   

                      3.scale：縮放，1為原始大小。scale(x)。正數放大，負數縮小。屬性值為一個時，x/y軸同時縮放；屬性值為兩個值時，分別控制x、y軸的縮放。

                      4.skew：將元素沿水平方向傾斜變形。skew(Xdeg,Ydeg)。這個比較難表述，想象一下平行四邊形吧。屬性值為一個時，x、y軸參數相同；為兩個時，x、y軸          各自傾斜matrix：矩陣，六個值。

 第二步：我們來學會定位12個時刻位置。

           大家熟悉基本用法後，我們開始進階後，這裡實現思路有很多種，可以用層，我們使用列表來實現。先定下基本樣式。　

 1 /*樣式*/ 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 /*容器*/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>

   效果應該是很整齊的隊列：12 1 2 3...11 ，到目前為止，還沒有一點旋轉跡象啊，現在要亮劍了，使用transform,因為喜歡Google，現在就先用Google瀏覽器做實驗，我們編寫3個時刻的樣式

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);}

　在運行看下效果，是不是很神奇，開始轉了，細心的人注意到上面3個樣式，有兩個使用了2個屬性rotate() 和translate() ,而且使用了一個偽類別選取器nth-child(an+n)，這裡先簡單理解為索引到第幾個li。更詳盡的理解可以閱讀這篇文章http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html ,繼續我們的主題，這兩個函數混合起來使用在計算時刻點位置的時候，我們需要去理解，為什麼往下位移，translate 值為負值，這裡有一個優先順序的問題，先渲染rotate(),然後在定位。所以就不難理解，當渲染以後，x,y軸也跟著旋轉了，所以在這個層面理解，他是往上移動定位。理解了這點，後面的點也就都好定位了。

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);}

   效果看起來，字型斜著的，如果不是為了熟練rotate和translate的混合使用，一般使用translate 就夠了。限於篇幅，我們在下篇中繼續講解。