3D 和 CSS 结合使用

Question

长期以来，3D 一直是桌面应用程序的专利。 最近随着可以访问本地 GPU 加速的高级智能手机的推出，我们开始看到几乎无处不在的 3D。

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

CSS 3D 转换模型 于 2009 年 3 月作为规范草案引入，允许 Web 开发人员创建有趣且引人注目的用户界面，通过允许应用程序作者将 3D 透视转换应用于任何可视 DOM 元素来利用 3D。

CSS 3D 转换工作草案是 CSS 2D 转换模型 的逻辑扩展，引入了一些额外的属性，包括：透视、旋转和 3D 空间中的转换。我们以前从未如此轻松地构建 3D 界面。 这些技术降低了进入门槛。 您不再需要成为数学高手来构建 3d 元素。必须注意的是，CSS 3D 模块旨在帮助开发人员构建丰富且视觉上有趣的应用程序，而不是旨在让您能够构建身临其境的 3d 世界。

浏览器支持和硬件加速

截至 2013 年 10 月，所有主流浏览器都支持 CSS 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 Transition 模块 结合得非常漂亮。 动画和过渡很容易在 CSS 中定义，将它们应用于 3d 也不例外。

为应用了 3D 透视图的元素制作动画很容易。 只需将 transition 样式设置为 transform，附加持续时间和动画功能。 从那时起，对变换样式的任何更改都将被动画化。

我们重构了前面的示例以使用文档样式，而不是内联样式。 它不仅清除了示例，还允许示例利用 :hover 伪选择器。 通过使用 :hover 选择器，只需将鼠标移到元素上即可启动转换。

总结

这只是快速浏览了一些可以使用 CSS 3D 转换应用于任何可见 DOM 元素的炫酷效果。 本教程中还有许多未涉及的事情可以完成。