目录

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/

翻译:若愚@饥人谷