# CSS3 3D 转换
## 3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中,您将学到其中的一些 3D 转换方法:
* rotateX()
* rotateY()
点击下面的元素,来查看 2D 转换与 3D 转换之间的不同之处:
2D 旋转
3D 旋转
## 它如何工作?
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
## 浏览器支持
| 属性 | 浏览器支持 |
| --- | --- |
| transform |
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 [2D 转换](/css3/css3_2dtransform.asp "CSS3 2D 转换"))。
## rotateX() 方法
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
### 实例
```
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);/* Firefox */
}
```
## rotateY() 旋转
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
### 实例
```
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);/* Safari 和 Chrome */
-moz-transform: rotateY(130deg);/* Firefox */
}
```
## 转换属性
下面的表格列出了所有的转换属性:
| 属性 | 描述 | CSS |
| --- | --- | --- |
| [transform](/cssref/pr_transform.asp "CSS3 transform 属性") | 向元素应用 2D 或 3D 转换。 | 3 |
| [transform-origin](/cssref/pr_transform-origin.asp "CSS3 transform-origin 属性") | 允许你改变被转换元素的位置。 | 3 |
| [transform-style](/cssref/pr_transform-style.asp "CSS3 transform-style 属性") | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| [perspective](/cssref/pr_perspective.asp "CSS3 perspective 属性") | 规定 3D 元素的透视效果。 | 3 |
| [perspective-origin](/cssref/pr_perspective-origin.asp "CSS3 perspective-origin 属性") | 规定 3D 元素的底部位置。 | 3 |
| [backface-visibility](/cssref/pr_backface-visibility.asp "CSS3 backface-visibility 属性") | 定义元素在不面对屏幕时是否可见。 | 3 |
## 2D 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 转换元素的透视视图。 |