CSS3 Tutorial 《CSS3 教程》

感谢waylau.com提供内容
3D 转换
====

CSS3 3D Transform,用于 3 维动画或旋转。

CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性可以改变元素的形状、大小和位置。

主要有下列方法:

* rotateX()
* rotateY()
* rotateZ()

**注意:**Internet Explorer 10 和 Firefox 支持 3D 转换;
Chrome 和 Safari 必须添加前缀 -webkit-;
Opera 还不支持 3D 转换(支持 2D 转换 )

![](../images/transform-3d.jpg)

## rotateX()

rotateX()方法,围绕其在一个给定度数X轴旋转的元素。

.rotate-x {
transform: rotateX(60deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}


## rotateY()

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

.rotate-y {
transform: rotateY(60deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

## rotateZ()

rotateZ()方法,围绕其在一个给定度数Z轴旋转的元素。

.rotate-z {
transform: rotateZ(60deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

## rotate3d()
otate3d(x,y,z,a)中取值说明:

* x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
* y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
* z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
* a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
面介绍的三个旋转函数功能等同:

* rotateX(a)函数功能等同于rotate3d(1,0,0,a)
* rotateY(a)函数功能等同于rotate3d(0,1,0,a)
* rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

例子

.rotate-3d {
transform: rotate3d(0,0.6,0.2,60deg);
-webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
}

## 转换方法

函数 描述
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 转换元素的透视视图。


## 源码

本文中所用例子源码参见
中 `samples` 目录下的 3d_transform.html

## 参考
*
*