html3d转换,CSS3 3D 转换

# 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 转换元素的透视视图。 |