Jaa

IE10 中的 CSS3 3D 变换

  • Artikkeli

CSS3 功能可以帮助您更轻松地构建丰富多彩、引人入胜的 Web 体验。近期的一篇博文中曾介绍过 Web 开发人员如何能够借助 CSS3 过渡和动画为其网站增添个性。CSS3 3D 变换为开发人员强化其网站增添了一个新的维度（这一点毫不夸张）。例如，Windows 8 Metro 风格的 [Start]（开始）页使用精巧的 3D 变换来突出显示已按下的图块，如下图所示。

未按下（左）和已按下（右）的 Internet Explorer 10 图块
未按下（左）和已按下（右）的 Internet Explorer 10 图块

为 CSS 变换添加第三维度

与 CSS3 2D 变换相似，3D 变换也为 CSS transform 和 transform-origin 属性提供了相应的函数和值，用于将几何变换操作应用到 HTML 元素。CSS 3D 变换对变换函数进行了扩展以支持 3D 变换。这包括扩展的变换函数，例如 rotate()、 scale()、translate()、skew() 和 matrix()，它们通过添加 Z 坐标参数来填充 3D 空间（matrix3d() 函数更是增加了 10 个额外的参数），以及额外衍生出的一些变换函数，例如 rotateZ() 和 scaleZ()。

新的 perspective 变换函数可以让距离较远的点变小，从赋予变换后的元素景深效果。

CSS3 3D 变换还增加了一些新的 CSS 属性。除了 transform 和 transform-origin 属性，IE10 还支持带有供应商前缀的 transform-style 值，包括：perspective、perspective-origin、backface-visibility 和 flat。

注意： 本博文中的标记示例全部使用 W3C 标准定义的不带有前缀的属性。但是，目前支持这些功能的所有浏览器全部通过供应商特定的前缀来实现它们。实际操作时，请注意向示例标记中添加浏览器的前缀。

Perspective

perspective 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上。如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存在景深概念。对于某些变换，例如下图显示的沿 Z 轴的变换，perspective 变换函数对于查看变换的效果来说必不可少。

下例中，  是原始、未变换的元素，而  是变换后的元素

transform: perspective(500px) translate(0px, 0px, -300px); 的示例 transform: translate(0px, 0px, -300px); 的示例
transform: perspective(500px) translate(0px, 0px, -300px); transform: translate(0px, 0px, -300px);
 
transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg); 的示例
transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg);

您可以通过在父元素中使用 perspective 属性来便捷地向多个元素添加透视变换。perspective 属性会将透视变换应用于其所有子元素：

通过同一父 perspective 属性变换两个 div 的示例。

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

perspective-origin 属性也可以与 perspective 结合使用，以便将视点移至元素的中心以外：

演示 perspective-depth 属性。

在下图中您可以看到，如果将透视出发点移至左侧，则位于初始透视出发点右侧的内容将显得更远。

通过同一父 perspective-depth 属性变换两个 div 的示例。

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

backface-visibility

backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象，例如下例中使用的纸牌。通过将 backface-visibility 设置为 hidden，您可以轻松确保只有正面可见。

CSS 标记：

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

一张纸牌的 HTML 标记：

<div class="card"><div></div><div></div></div>

根据上述定义创建六张纸牌，并为每张纸牌的 style="transform: rotateY(ndeg)" 属性设置不同的旋转值 n，结果如下：

从正面逐渐翻转到背面的 6 张纸牌。
rotateY(0deg);rotateY(36deg);rotateY(72deg);rotateY(108deg);rotateY(144deg);rotateY(180deg);

本例中，未旋转时，您将看到第二个 div（即，草花 8），这是由于其绘制顺序位于顶部。随着向纸牌应用的旋转超过 90 度，第二个 div 的 backface-visibility: hidden; 属性将导致其不可见，因此将显示第一个 div（即，纸牌正面）。

借助动画和过渡实现 3D 变换

最重要的是，您甚至可以将 3D 变换与 CSS 过渡和动画结合使用。如果您正在使用 IE10 或支持 CSS3 3D 变换动画的其他浏览器，请尝试以下滚动文本示例，该示例是通过将 transform 属性动画化实现的。

以下 CSS 标记可实现下方屏幕快照中所显示的效果。

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

使用 3D 变换的滚动文本动画演示的早期帧。使用 3D 变换的滚动文本动画演示的后期帧。

立即试用

请在 Windows 开发人员预览版的 IE10 中尝试本演示。体验演示自己动手：3D 变换可以帮助您一窥 CSS 3D 变换提供的可能效果。

我们期待您的大作早日问世！

—Internet Explorer 图形项目经理 Jennifer Yu