CSS3-2D转换，3D转换，过渡

2D转换

1.translate()
移动元素：

transform:translate(50px,100px)
translateX(n)
translateY(n)

2.rotate()
顺时针旋转元素，负值则为逆时针：

transform: rotate(30deg);

3.scale()
元素尺寸增大或减少：

transform: scale(2,4);
x两倍，y四倍
scaleX(n)
scaley(n)

4.skew()
元素倾斜翻转：

transform: skew(30deg,20deg);
x轴30度，y轴20度。
skewX(angle)
skewy(angle)

5.matrix()
组合，6个参数

transform:matrix(0.8,0.5,-0.5,0.8,0,0);
第一个数字X放大或减小
第二个数字Y倾斜
第三个数字X倾斜
第四个数字Y放大或减小
第五个数字X位置
第六个数字Y位置

3D转换

1.rotate
X,Y,Z定义以围绕X.Y.Z轴进行旋转

rotateX(angle) 定义沿 X 轴的 3D 旋转。 
rotateY(angle) 定义沿 Y 轴的 3D 旋转。 
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 
transform:rotateZ(angle)

2.origin
允许你改变被转换元素的位置

过渡

1.property
定义哪些元素需要过渡，全部可以用all

transition-property：all

2.duration
定义过渡效果需要的时间

transition-duration:2s

3.timing-function
规定过渡效果的时间曲线。默认是 “ease”

linear 规定以相同速度开始至结束的过渡效果

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.delay
规定过渡效果何时开始。默认是 0。