CSS3--2D&3D的使用

transform 过渡属性 向元素进行2D或3D转换

transform-origin：该元素基于某个点来旋转 

transform-style: preserve-3d 规定嵌套元素如何在3D空间显示；

perspective :perspective 属性只影响 3D 转换元素,多少像素的3D元素是从视图的perspective属性定义

backface-visibility:属性定义当元素不面向屏幕时是否可见;

2D:对元素移动、缩放、拉伸、拉长和转动；

3D:在三维空间操作，可以改变元素尺寸、形状和位置；

2D方法：

1.translate(x,y) 2D转换，沿着X轴和Y轴平行移动元素

2.translateX(n) 2D转换，沿着X轴平行移动元素

3..translateY(n) 2D转换，沿着Y轴平行移动元素

4.scale(x,y) 2D转缩放转换，改变元素的宽度和高度

5.scaleX(n) 2D转缩放转换，改变元素的宽度

6.scaleY(n) 2D转缩放转换，改变元素的高度

7.rotate(angel) 2D旋转，规定任意角度

8.skew(x-angel,y-angel) 2D倾斜转换，沿着X轴和Y轴

9.skewX() 2D倾斜转换，沿着X轴

10.skewY() 2D倾斜转换，沿着Y轴

3D方法：

1.translate(x,y,z) 3D转换，沿着X轴和Y轴Z轴转换

2.translateX(n) 3D转换，沿着X轴转换

3..translateY(n) 3D转换，沿着Y轴转换

4..translateZ(n) 3D转换，沿着Z轴转换

5.scale(x,y) 3D转缩放转换

6.scaleX(n) 3D转缩放转换，给定X轴的值

7.scaleY(n) 3D转缩放转换，给定Y轴的值

8.scaleZ(n) 3D转缩放转换，给定Z轴的值

9.rotate(angel) 3D旋转，规定任意角度

10.rotateX(angel)沿着X轴3D旋转

11.rotateY(angel) 沿着Y轴3D旋转

12.rotateZ(angel) 沿着Z轴3D旋转

浏览器支持：

2D：

IE10,Firefox,Opera支持，Chrome和Safari需要前缀-webkit-,IE9需要前缀-ms.

3D:

IE10,Firefox，Chrome和Safari需要前缀-webkit-,Opera不支持。

区别：

3D除了增添了少许2D没有的属性外，其他基本上是细化了2D的属性。