CSS3效果的属性用法

1. rotate
   Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
2. scale
   Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
3. translate
   Translate就是基于X和Y 坐标重新定位元素
4. skew
   顾名思义，skew就是要将对象倾斜，参数是度数
5. matrix
6. transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

1.rotate：

       {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

 负数表示逆时针，正数表示顺时针旋转，deg是单位度。

 IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3，无法获得和Webkit一样的精密控制。

 

2.scale：

       {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1); 
	-o-transform: scale(1.1); 
	}

 元素放大1.1倍

 

3.translate：

       {
	-moz-transform: translate(10px, 20px);
	-webkit-transform: translate(10px, 20px); 
	-o-transform: translate(10px, 20px); 
        }

 正数的方向是向下向右，这里，可以让元素向下向右分别位移10,20像素。

 

4.skew:

        {
	-moz-transform: skew(30deg, -10deg);
	-webkit-transform: skew(30deg, -10deg); 
	-o-transform: skew(30deg, -10deg); 
         }

      Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

      有兴趣深入研究，可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

 

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

 

       {
	-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
	-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	-o-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	} 

 

连续的动画的属性transition:

 

{
	-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		transition:all .2s ease;
}