CSS 3D 转换

简介

目录

• 介绍
• 透视
• 3D transform 函数
• 卡片翻转
• 立方体
• 盒子
• 旋转木马
• 总结
• 返回列表

随着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/

翻译：若愚@饥人谷