Question

Webkit核心浏览器（Safari和Chrome）和Firefox 10＋都已支持CSS3的3D变形，但最新的IE10都还不支持该特性。尽管缺少“桌面版”浏览器的广泛支持，但多亏了移动平台浏览器基本都是Webkit血统，所以3D变形在Android（V3以后的版本）和iOS（所有版本）上均被支持。

从这点上来讲，你最好在Webkit核心浏览器（如Chrome或Safari）中测试网页效果（当然，也可以选择其他支持3D变形的浏览器）。

现在我们开始尝试3D变形。这是一片广阔天地，有几乎无穷的可能性。我想象着有一天3D变形被广泛支持，我们就可以用它来做图片轮播效果，而不用再依赖jQuery等JavaScript方案了。不过，在那一刻到来之前，我们先来体验一下。

假设给AND THE WINNER ISN'T网站做一个简单测验功能。测试题目由一组电影海报组成，你必须猜猜世界上最权威的电影评论家（哈哈，说的就是我！）对这些电影的评判是好是坏。将鼠标悬停在图片上（在触摸屏上则是触击图片）就能揭晓答案。

下面的代码是相关的页面标签，其中省略了重复的图片标签，因为它们的结构都一样：

对应的CSS代码如下。注意，因为Webkit浏览器对3D变形的支持比较好，所以下面的声明都使用特定的浏览器前缀。和之前一样，在实际开发中，浏览器私有前缀就是你形影不离的好朋友。

代码部署好之后，将鼠标悬停在海报图片上，会看到图片翻转到背面并显示出了该电影的评判结果。

7.3.1　分析3D变形效果

我们来研究一下代码，看看3D变形效果是如何实现的。

第一个要点是在父级元素上设置透视。这样就开启了3D场景：

透视的值越大，就表示你的视点与3D场景之间的景深越大。因此，如果想要一点隐约的3D效果，就增大透视值；如果想要非常明显的3D效果，则减小透视值。（3D效果的立体程度，取决于3D场景与观察者之间的距离。）

下一个要点：

.Qcontainer类中添加的透视声明只会应用到其第一个子元素上（即本例中的class为.film的div）。因此，为了延续父元素的透视，我们给.film元素设定了preserve-3d（这样可以设置一个3D场景）。

接下来，当鼠标悬停在.Qcontainer模块上时，我们给.film这个div添加一个翻转效果：

接下来的规则用来处理当海报翻转之后隐藏在其背面内容：

.face必须使用绝对定位，这样海报才能盖在.back这个div的上面：

最后，我们给.back这个div也加上rotateY。不加这句的话，.back这个div就会显示在正面海报之上。

这就全部做完了。现在将鼠标移到任意一张海报上都会看到超级酷炫的3D效果。

不过，对于非Webkit核心浏览器，页面效果肯定就残废了：

还好，我们可以用一点传统的CSS代码为非Webkit核心浏览器提供一个合理的降级方案：

首先，我默认给.front设置了z-index为5，以便让其显示在.back上面：

然后，当.Qcontainer模块处于悬停状态时，我们给.front设置z-index为0以便让其隐藏在.back后面：

这样我们就给不支持3D变形的浏览器也提供了简单问答功能，只是缺少优雅的3D效果。

7.3.2　3D变形尚未成熟

根据我的实践经验，目前大多数3D变形在使用百分比尺寸时效果都不太好（例如，修改上节例子中的视口宽度，将会使3D变形效果完全错乱）。所以现在要让3D变形在响应式布局中呈现完美效果还有一些问题。此外，由于浏览器的支持有限，在制作跨浏览器网站时，3D变形无法提供健壮的解决方案。目前，我依然使用jQuery或类似技术来制作这类变形效果。

但是，CSS3 3D变形的前途是光明的，当浏览器开始广泛支持时，它就为我们提供了一次难得的机遇，让我们可以将现在依赖于JavaScript的优雅效果移植到样式表中。

想了解W3C有关CSS 3D变形的最新进展，请见这里：http://dev.w3.org/csswg/css3-3d-transforms/。