3D 和 CSS

Paul Kinlan

简介

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

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

CSS 3D 转换模型于 2009 年 3 月作为规范草案引入，允许应用作者对任何可视化 DOM 元素应用 3D 透视转换，从而允许网络开发者创建充分利用 3D 的有趣且引人注目的界面。

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

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

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

浏览器支持和硬件加速

-webkit-perspective

-webkit-transform-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 元素的酷炫效果。本教程未介绍的功能还有很多。