CSS3 3D转换

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）

transform-origin 属性

Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。
Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

定义和用法

transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注释：该属性必须与 transform属性一同使用。
transform-origin 2D例子
transform-origin 3D例子

语法

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

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left center right length %
y-axis	定义视图被置于 Y 轴的何处。可能的值：top center bottom length %
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

默认值：50% 50% 0

transform-style 属性

浏览器支持

Firefox 支持 transform-style 属性。
Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
IE浏览器不支持transform-style属性

使被转换的子元素保留其 3D 转换：

div {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg);  /* Safari 和 Chrome */
    -webkit-transform-style: preserve-3d;   /* Safari 和 Chrome */
}

点击测试

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与transform属性一同使用。

语法

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

perspective 属性

设置元素被查看位置的视图：

div {
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
}

点击测试

浏览器支持

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
请与 perspective-origin属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

语法

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

perspective-origin 属性

设置 3D 元素的基点位置：

div {
    perspective:150;
    perspective-origin: 10% 10%;
    -webkit-perspective:150;    /* Safari 和 Chrome */
    -webkit-perspective-origin: 10% 10%;    /* Safari 和 Chrome */
}

点击测试

浏览器支持

目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

定义和用法

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective属性一同使用，而且只影响 3D 转换元素。

语法

perspective-origin: x-axis y-axis;

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%。可能的值：left center right length %
y-axis	定义该视图在 y 轴上的位置。默认值：50%。可能的值：top center bottom length %

backface-visibility 属性

隐藏被旋转的 div 元素的背面：

div {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Chrome 和 Safari */
    -moz-backface-visibility:hidden;    /* Firefox */
    -ms-backface-visibility:hidden;     /* Internet Explorer */
}

点击测试

浏览器支持

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。

语法

backface-visibility: visible|hidden;

值	描述
visible	背面是可见的。
hidden	背面是不可见的。

3D Transform 方法

值	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。