使用CSS 3D属性的提示和技巧

01-12 次

标签 3d perspective 3d属性

在你正确的设置了perspective属性之后，使用CSS 3D还是有一些元素是需要考虑的。这里有个奇怪的地方，部分CSS Transforms 的3D效果可以提高2D transitions 和 animations的性能，下一篇文章中我们将讲解它。现在来看一下CSS 3D方面的内容。

CSS 3D天然具有响应式效果

3D transforms令人惊奇的方面是它天生能够适应屏幕的大小。看一个小例子，一个div中放置一幅图片：

<div class="3d-container">
    <img src="shanghai.jpg" alt="Photograph of Shanghai at night">
</div>

现在给这个div一个合理的perspective值，然后将图片沿Y轴旋转33度。（注意这里没有使用浏览器的厂商前缀）

div.3d-container { perspective: 1000px; }
div.3d-container img { width: 33%; transform: rotateY(33deg); }

效果如下：

上海的夜晚-1

图片将自动被设置为包含它的容器的宽度的1/3。如果将图片旋转回来，它的宽度则是容器宽度的100%。默认情况下，透视点是div的中心。假设它们都没有固定的宽度，这意味着改变屏幕的大小将不仅仅是改变div的宽度和图片的尺寸，还会移动透视的消失点。如果你使用桌面浏览器，你可以看到这样的现象：但屏幕很大时，图像的显示效果是正确的。当你将屏幕压缩到足够小，你会发现透视将变形，图片会被拉片。

只使用一个容器来保证多元素共享同一种透视效果

当我们使用嵌套元素时，页面代码会变得越来越复杂。这种情况下，如果为父元素包含的每一个子元素都提供一个单独的透视值会产生一些问题。例如：在同一个div中放两张图片，使用上面的CSS代码，得到下图的效果：

上海的夜晚-2

你可以看到两幅图片的透视角度是相同的。现在我们将两幅图片分布放置在两个不同的div中，两个div都使用相同的class。得到的是下面的效果：

上海的夜晚-3

正如你所见，图片各自有自己的消失点。

使子元素继承3D效果

如果你确实需要一个嵌套的html结构，有想实现相同的透视效果，可以使用下面的技术。在上面代码的基础上使用一个div将它们包裹起来。

<div class="3d-container">
    <div>
        <img src="shanghai-at-night.jpg" alt="Photograph of Shanghai at night">
    </div>
    <div>
        <img src="sydney-harbour.jpg" alt="Photograph of Sydney Harbour">
    </div>
</div>

使用这个方法，在最新版本的Chrome 和 Safari浏览器中将得到正确的效果。在Firefox浏览器中有一个小问题：子元素不会继承父元素的3D transforms属性。

要通过子元素来传播3D属性，需要在它们的父元素上放置transform-style:preserve-3d：

div.container { perspective: 1000px; border: 1px solid red; }
div.container div { transform-style:preserve-3d; }
div.container div img { max-width: 50%; transform: rotateY(33deg); }

这将使得图片正确的基础父元素的3D透视效果。这也意味着父元素的3D transforms将影响它们的子元素。这使得制作多层的3D透视效果成为可能。

在后面的文章中，我们将讲解更多关于设置3D transforms是可能出现的问题：《更多关于CSS 3D属性的技巧-平滑转换和浮动元素》，以及如何使用语法来提高你的2Dransitions 和 animations效果。