css3 3D转换

一、转换方法：

1、rotateX ()

2、rotateY ()

浏览器支持：

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

rotateX ()方法：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

div
{
transform: rotateY(30deg);
-webkit-transform: rotateY(30deg); /* Safari 和 Chrome */
-moz-transform: rotateY(30deg); /* Firefox */
}

rotateY ()方法：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转（用法同rotateX()相同）

二、转换属性：

1、transform：向元素应用2D或3D转换

2、transform-origin：允许改变被转换元素的位置

3、transform-style：规定被嵌套元素如何在3D空间中显示

4、perspective：规定3D元素的透视效果

5、perspective-origin：规定3D元素的底部位置

6、backface-visibility：定义元素在不面对屏幕时是否可见

transform：

浏览器支持：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

语法：

transform: none|transform-functions;

transform-origin：

浏览器支持：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

语法：

transform-origin: x-axis y-axis z-axis;

transform-style：

浏览器支持：

Firefox 支持 transform-style 属性。

Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。

语法：

transform-style: flat|preserve-3d;

// flat：子元素将不保留其3D位置

// preserve-3d：子元素将保留其3D位置

perspective：

浏览器支持：

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

语法：

perspective: number|none;

// number：元素距离视图的距离，以像素计

// none：默认值，与0相同，不设置透视

perspective-origin：

浏览器支持：

目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性

语法：

perspective-origin: x-axis y-axis;

backface-visibility：

浏览器支持：

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。

Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性

语法：

backface-visibility: visible|hidden;

// visible：背面是可见的

// hidden : 背面是不可见的