精通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值用相应函数计算出来就可以了
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 就够了。限于篇幅，我们在下篇中继续讲解。
