CSS3效果的属性用法

1. rotate
Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
2. scale
Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
3. translate
Translate就是基于X和Y 坐标重新定位元素
4. skew
顾名思义，skew就是要将对象倾斜，参数是度数
5. matrix
6. transform支持矩阵变换，就是基于X和Y 坐标重新定位元素
1.rotate：
Js代码
1.       {
2. -webkit-transform: rotate(-90deg);
3. -moz-transform: rotate(-90deg);
4. -o-transform: rotate(-90deg);
5. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
6. }
负数表示逆时针，正数表示顺时针旋转，deg是单位度。
IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3，无法获得和Webkit一样的精密控制。

2.scale：
Js代码
1.       {
2. -webkit-transform: scale(1.1);
3. -moz-transform: scale(1.1);
4. -o-transform: scale(1.1);
5. }
元素放大1.1倍

3.translate：
Js代码
1.       {
2. -moz-transform: translate(10px, 20px);
3. -webkit-transform: translate(10px, 20px);
4. -o-transform: translate(10px, 20px);
5.        }
正数的方向是向下向右，这里，可以让元素向下向右分别位移10,20像素。

4.skew:
Js代码
1.        {
2. -moz-transform: skew(30deg, -10deg);
3. -webkit-transform: skew(30deg, -10deg);
4. -o-transform: skew(30deg, -10deg);
5.         }
      Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。
      有兴趣深入研究，可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

可以链式写在一些，使代码更高效：

Js代码
1.       {
2. -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
3. -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
4. -o-transform: translate(10, 25) rotate(90deg) scale(2, 1);
5. }

摘自 ouyangtao404

补充：web前端 , JavaScript ,