# 介绍

> 编者按：本手册是对 [Intro to CSS 3D transforms](https://3dtransforms.desandro.com/) 的译制。

## 简介

随着CSS变换（CSS transforms）的推广，元素可以实现移动、旋转、倾斜、压缩和拉伸等效果，赋予了Web设计师追赶上印刷设计者，并且最终超越他们的能力，同时探索一个全新的图形领域。

3D图形渲染在Web领域已经有几年历史了。Flash是第一个出现的技术，之后随着`<canvas>`和WebGL的发展出现了[Three.js](https://threejs.org/)这样的库，如今，Web VR和AR又近在咫尺。虽然这些解决方案在塑造可探索的3D应用环境上特别出色，但是他们对于Web呈现的主要形式--界面来讲，着实有些过分。而对于CSS 3D变换，前端工程师可以通过增加一个新的空间维度，更好的增强改善对于传统网站的设计。

## 应用场景

在我们深入探讨3D之前，我们应该为我们的用户问一个问题，对于3D这个特性，可以给他们带来什么好处？

事实上，CSS是作为样式文件而存在的，如今已经发展成为一个与应用不可分割的部分。然而，CSS对于3D建模并不是最理想的技术，所以，3D变换应该被看作为一个**附加特性**，是与媒体查询、渐变、过渡类似的现代CSS新特性。网站中优秀的3D效果应该是渐进增强式的设计，某个取代某个界面功能。我们有很多场景去设计一些3D变换，来实现各个界面之间的过渡效果。

比如像早期的IOS天气应用。这个应用具有两个视图：一个天气详情视图和一个选项设置视图。这两个视图之间的切换采用的是3D翻页过渡效果，这样可以让用户明确的知道这个界面包含两个视图，同时也只有两个视图，分别在面板的正反两面。

![](https://830053722-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lf-8lnONg_WNTsQvlGE%2F-Lf-8pdAznbHZWNAmurg%2F-Lf-8sOcp2fKZvAY9TVQ%2Fweather-app-transition.jpg?generation=1558001978132244\&alt=media)

再来看轮播循环的例子。你如何让轮播的内容循环播放？答案是利用3D变换来排列每幅内容。让每幅内容在3D空间内依次排列为一个圆圈，这样再来实现循环播放便轻而易举了。

3D变换不仅仅只是在视觉上锦上添花，而且我们可以用它来解决实际的界面交互难题，使我们的应用更加易于使用。

## 可支持环境

[CSS 3D变换](https://www.w3.org/TR/css-transforms-1/)这个模块是在[2009年被首次提出的](https://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/)。它出自苹果公司之手，所以Safari也是第一个支持CSS 3D变换的浏览器。此后，所有的现代浏览器，包括Chrome，Firefox，IE和Edge都对其陆续提供支持。你可以在[caniuse.com](https://caniuse.com/#feat=transforms3d)查看各种浏览器对其支持的最新情况。

截止2018年，不带前缀的`transform`CSS属性已经被98%的浏览器支持。而带前缀的`-webkit-transform`属性可以向下兼容一些老浏览器，更好的得到99%的浏览器支持。

这里有一点需要注意。[IE 11不支持](http://msdn.microsoft.com/en-us/library/ie/hh673529\(v=vs.85\).aspx#the_ms_transform_style_property)`transform-style: preserve-3d`（我们将会在后续篇幅介绍这个属性）这意味着IE11仍然可以对单独元素使用3D变换，但是其对于嵌套在文档内构建对象的子元素是无法处理的。

接下来我们一起来看编码实现。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://css3d.mikey.wang/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.