CSS3中transform属性和transition属性

transform属性：

旋转rotate()函数：通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */

扭曲skew()函数：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

skew(x-angle,y-angle)

定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle)

定义沿着 X 轴的 2D 倾斜转换。

skewY(angle)

定义沿着 Y 轴的 2D 倾斜转换。

缩放 scale()函数 ：让元素根据中心原点对对象进行缩放。

  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);

变形--原点 transform-origin

-webkit-transform-origin: left top;
  transform-origin: left top;

 

translate()函数：可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate(x,y)

定义 2D 转换。

translate3d(x,y,z)

定义 3D 转换。

translateX(x)

定义转换，只是用 X 轴的值。

translateY(y)

定义转换，只是用 Y 轴的值。

translateZ(z)

定义 3D 转换，只是用 Z 轴的值。

matrix() 函数:是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，如果需要深入了解，需要对数学矩阵有一定的知识。

matrix(n,n,n,n,n,n)

定义 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

定义 3D 转换，使用 16 个值的 4x4 矩阵。

transition属性：

transition-property:指定过渡或动态模拟的CSS属性

多个属性间用逗号隔开。

none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-timing-function:指定过渡函数

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-duration:指定完成过渡所需的时间
transition-delay:指定开始出现的延迟时间transition-property:指定过渡或动态模拟的CSS属性

必须加上单位。

time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

若合在一起使用
a{ 

transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;

}