目录
CSS 3D 转换
简介
目录
随着CSS转换的引入，元素可以被移动，旋转，倾斜，挤压和拉伸。网页设计师终于能够赶上印刷设计师。借助 CSS 3D 转换，网页设计师可以超越打印工具，探索平面设计的新领域。
在 Web 上渲染 3D 图形已经存在多年。首先是Flash，然后随着<canvas>和WebGL的到来出现了Three.js。WebVR和增强现实也即将到来。虽然这些解决方案在生成可探索的3D 效果方面非常出色，但它们对于Web的主要内容（界面）来说可能有些杀鸡用牛刀。其实只需要借助 CSS 3D 转换，前端开发人员就可以通过向传统网站添加新维度来增强其设计。
出发点
在我们深入探讨第三个维度之前，我们告诉用户如何从此功能中受益。
一个更真实的场景。CSS 是为设置文档样式而构建的，之后CSS的功能越来越强大。但实际上CSS并不是3D建模的理想选择。我们在使用CSS的3D时应该应该像使用其他CSS功能如媒体查询、渐变和过渡一样 — 把CSS 3D做为增强项。换句话说，在网站原有功能上做出3D过渡效果更好，但不要想着整个网站元素用3D模型来替换。我们有很多机会通过过渡在界面之间使用3D转换。
以早期iOS的天气应用程序为例。该应用程序使用了两个视图：详细信息视图和选项视图。在这两个视图之间切换是通过 3D 翻转过渡完成的。
3D变换可能不仅仅是一个华而不实的花瓶。我们可以使用它们来解决实际的界面挑战，并使我们的应用程序更加直观。
当前支持环境
CSS 3D转换模块于2009年首次推出。它由Apple的成员撰写，并首先由Safari支持。从那时起，包括Chrome，Firefox，Internet Explorer和Edge在内的所有现代浏览器都增加了支持。查看caniuse.com/#feat=transforms3d上的图表，以检查整个浏览器环境中的最新支持环境。
截至 2018 年，98% 的浏览器都支持无前缀的 CSS 属性。添加将捕获较旧的浏览器以达到99%。transform-webkit-transform
Internet Explorer 11 不支持transform-style： preserve-3d（稍后我们将介绍此属性）。这意味着IE11仍然可以对单个元素使用3D转换，但不能处理嵌套元素来构建本文中介绍的对象。
让我们开始写代码吧。
原文: https://3dtransforms.desandro.com/
翻译：若愚@饥人谷
