CSS32D和3D

css3 2D转换

2D转换的效果是让某个元素改变形状，大小和位置。需要用到transform属性。

1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。translate(X轴,Y轴) translateX(n) translateY(n)

2.rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

3.scale()方法，该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)）的参数: scale(原来宽度的几倍，原来高度的几倍)。translateX(n) ranslateY(n)

4.skew()方法，skewX(<angle>)表示只在X轴(水平方向)倾斜。skewY(<angle>)表示只在Y轴(垂直方向)倾斜。transform: skew(X轴方向倾斜,Y轴方向倾斜);

5.matrix方法有六个参数，包含旋转，缩放，移动(平移）和倾斜功能。是及以上方法的总和。

css3过渡

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容:指定要添加效果的CSS属性，指定效果的持续时间。

transition（css属性，几秒完成，速度，什么时候开始），用于在一个属性中设置四个过渡属性。

• transition-property 指定CSS属性的name，transition效果         属性值有： all none  CSS 属性名称
• transition-duration transition效果需要指定多少秒或毫秒才能完成      
• transition-timing-function 指定transition效果的转速曲线  属性值

1. linear匀速
2. ease先慢后快
3. ease-in慢速开始
4. ease-out慢速结束
5. ease-in-out慢速开始慢速结束
6. cubic-bezier(n,n,n,n)自定义n是0到1的值

• transition-delay定义transition效果开始的时候
• transform-origin允许你改变被转换元素的位置。
• backface-visibility定义元素在不面对屏幕时是否可见

css3 3D转换

CSS3 3D转换是在2D转换的基础上，添加一个Z轴的属性。

比如 

1. translate3d(x,y,z)、translateZ(z)定义沿着Z轴移动
2. rotate3d(x,y,z,angle)、rotateZ(angle)定义沿 Z 轴的 3D 旋转。
3. scale3d(x,y,z)、scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
4. perspective(n)定义 3D 转换元素的透视视图单位是px