先上圖
請思考，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值用相應函數計算出來就可以了
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,因為喜歡谷歌，現在就先用谷歌瀏覽器做試驗，我們編寫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 就夠了。限於篇幅，我們在下篇中繼續講解。