此页面由 Cloud Translation API 翻译。

3D 和 CSS

Paul Kinlan

简介

长期以来，3D 一直是桌面应用的专利。随着支持原生 GPU 加速的高级智能手机的推出，我们开始发现 3D 几乎无处不在。

通常，3D 主要用于游戏设备或某些高级界面。直到 WPF 和 Silverlight 中引入透视转换，适用于将 3D 效果应用于界面元素的模型才成为应用开发者的实用解决方案（毕竟 3D 并不容易）。

CSS 3D 转换模型于 2009 年 3 月作为草稿规范推出，让应用作者能够将 3D 透视转换应用于任何视觉 DOM 元素，从而让 Web 开发者能够创建利用 3D 技术的趣味十足且引人入胜的界面。

CSS 3D 转换工作草稿是对 CSS 2D 转换模型的逻辑扩展，引入了一些额外的属性，包括：3D 空间中的透视、旋转和转换。

我们以前从未如此轻松地构建 3D 界面。这些技术降低了进入门槛。您不必再是数学天才，也能构建 3D 元素。

必须注意，CSS 3D 模块旨在帮助开发者构建丰富且视觉上有趣的应用，而不是让您能够构建沉浸式 3D 世界。

浏览器支持

浏览器支持

请务必注意以下重要信息：虽然某款浏览器可能“支持”3D，但由于硬件和驱动程序限制，它可能无法渲染 3D 内容。基于 DOM 的 3D 场景的计算开销可能非常高，因此浏览器供应商决定利用 GPU（可能并非所有平台都支持）来加速浏览器，而不是使用纯软件渲染解决方案

特征检测怎么样？我希望您不会问这个问题！开发者一直在使用 Modernizr 等工具来检测对特定浏览器功能和能力的支持。虽然可以检测是否支持 3D 转换，但无法检测是否支持硬件加速，而硬件加速是关键因素。

不妨直接开始使用。在本示例中，我们将对任意 DOM 元素应用一组基本旋转。

首先，我们将在根元素上定义一个视图。

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

透视很重要，因为它定义了 3D 场景的深度如何渲染，值在 1-1000 之间会产生非常明显的效果，值超过 1000 则效果会较弱。然后，我们添加一个 iframe，并沿 Z 轴和 Y 轴应用 30 度旋转

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

成功了！至此，该元素已完全可交互，并且在所有方面都已成为一个成熟的 DOM 元素（除了现在看起来更酷一点）。如果您的浏览器不支持 3D 转换，则不会发生任何变化。您只会看到一个未应用旋转的简单 iframe。如果您的浏览器支持 3D 转换，但不支持硬件加速，则可能会看起来有点奇怪。

我喜欢 CSS3 3D 转换的一个原因是，它与 CSS 转换模块搭配得非常好。动画和转场效果在 CSS 中很容易定义，将其应用于 3D 也不例外。

为应用了 3D 透视图的元素添加动画效果非常简单。只需将“transition”样式设置为“transform”，然后附加一个时长和一个动画函数即可。从那以后，对“tranform”样式的任何更改都会带有动画效果。

我们重构了之前的示例，使其使用文档样式，而不是内嵌样式。这不仅使示例更加清晰，还让示例能够利用 :hover 伪选择器。使用 :hover 选择器时，只需将鼠标悬停在元素上即可启动转换。也很棒！

以上只是简要介绍了一些可使用 CSS 3D 转换应用于任何可见 DOM 元素的酷炫效果。本教程未介绍的功能还有很多。