简介
很久以来，3D 一直是桌面应用程序的重要组成部分。最近，随着能够使用原生 GPU 加速功能的先进智能手机的推出，我们开始看到 3D 几乎在任何地方都使用。
通常情况下，3D 主要用作游戏设备或一些高级界面。直到在 WPF 和 Silverlight 中引入 Perspective 转换，将 3D 效果应用到界面元素的合适模型对应用开发者来说才成为可行的解决方案（毕竟 3D 并非完全简单）。
CSS 3D 转换模型于 2009 年 3 月作为规范草稿推出，允许应用作者将 3D 透视转换应用到任何视觉 DOM 元素，从而允许网站开发者利用 3D 构建有趣且引人注目的界面。
CSS 3D 转换工作草稿是对 CSS 2D 转换模型的逻辑扩展，引入了一些额外的属性，包括 3D 空间中的透视、旋转和转换。
我们从未像现在这样轻松地构建 3D 界面。这些技术降低了进入门槛。您不必再像数学高手一样轻松地构建 3D 元素了。
请务必注意，CSS 3D 模块旨在帮助开发者构建丰富且具有视觉吸引力的应用，而不是用于构建沉浸式 3D 世界。
浏览器支持和硬件加速
-webkit-perspective
-webkit-transform-3d
请务必注意，虽然浏览器可能“支持”3D，但由于硬件和驱动程序的限制，它可能无法渲染 3D。 基于 DOM 的 3D 场景的计算成本很高，因此浏览器供应商决定利用 GPU，而不是纯粹的软件渲染解决方案拖慢浏览器的速度，而是利用 GPU，而 GPU 可能并非在所有平台上都可用
特征检测
特征检测是什么？我本来以为您不会问的！ 开发者一直在使用 Modernizr 等工具来检测是否支持特定浏览器功能和功能。虽然可以检测到是否支持 3D 转换，但无法检测到是否存在硬件加速，而硬件加速是关键因素。
基本示例
开门见山是最好的方法。在此示例中，我们将应用任意 DOM 元素的一组基本旋转。
我们首先在根元素上定义一个透视。
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
透视图很重要，因为它定义了 3D 场景深度的渲染方式，值介于 1 到 1000 之间将产生非常明显的效果，而值大于 1,000 时效果就会小一些。然后，我们添加一个 iframe 并围绕 Z 轴和 Y 轴进行 30 度旋转
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM！这就是说，该元素是完全可交互的，从各个方面来说，它是一个完善的 DOM 元素（只不过它现在看起来更酷了）。 如果您的浏览器不支持 3D 转换，则没有任何反应。您只会看到未应用旋转的简单 iframe。如果您的浏览器支持 3D 转换，但没有硬件加速，那么可能看起来有点奇怪。
动画
CSS3 3D 转换让我喜欢的一点是，它与 CSS Transition 模块的关系如此紧密。动画和过渡在 CSS 中很容易定义，因此将其应用到 3D 中也不例外。
轻松为采用 3D 透视的元素添加动画效果。只需将“transition”样式设为“transform”并附加时长和动画函数即可。此后，系统会以动画形式显示对“tranform”样式的任何更改。
我们已重构前面的示例，以使用文档样式，而不是内嵌样式。这不仅清除了示例，还允许示例利用 :hover 伪选择器。借助 :hover 选择器，您只需在相应元素上移动鼠标即可启动过渡效果。也很棒！
摘要
这只是对使用 CSS 3D 转换应用到任何可见 DOM 元素的一些酷炫效果的简要介绍。您仍然可以完成许多本教程中未涵盖的操作。