css3-transform

transform，因为还没有成为w3c的标准，所有使用中，各浏览器版本定义样式名称如下：

1.google chrome: -webkit-transform  

2.mozilla firefox: -moz-transform:  

3.opera: -o-transform: 

4.IE filter

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轴分别定位。

3.scale：缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。

4.skew：将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴          各自倾斜matrix：矩阵，六个值。

注意：1）当使用rotate（）后，x,y 轴也会进行旋转，所以，translate()的坐标填写要注意：想要表达原定xy轴的位置，只能用当前的变化的xy轴写出相对位置。

2）rotate()属性，最好用行内元素来体现，即（display：inline-block；），不要使用块级元素。

<div id="container">
     <ul>
            <li>12</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
     </ul>
</div>

#container li {
   display: inline-block;
   font-size: 18px;
   font-weight: bold;
   text-shadow: #E8E8E8 2px 2px 1px;
}

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

效果如下：