3D 变换

Mac OS X 上的 WebKit 现在支持 CSS 3D 变换，它允许您使用 CSS 在三维空间中定位页面元素。这是 2D 变换的自然扩展，我们已经在之前的博文中描述过。3D 变换自 iPhone 2.0 以来就已支持，现在我们很高兴地宣布，我们已在 Leopard 及更高版本中添加了支持。

如果您想立即体验并查看演示，请确保您在 Leopard 或更高版本上运行最新 WebKit 夜间构建版，然后加载此示例

海报圆

如果您没有运行足够新的 WebKit，这里是截图（如果您有，将鼠标悬停在上面会有惊喜！）

像您在这里看到的大多数示例一样，这个示例将 CSS 变换与CSS 过渡和动画结合起来，效果极佳。

3D 变换通过与 2D 变换相同的 -webkit-transform 属性应用。例如，以下是如何绕 Y（垂直）轴旋转元素

-webkit-transform: rotateY(45deg);

-webkit-transform 属性中有几个新的变换函数可供使用

translate3d(x, y, z), translateZ(z)

沿 x、y 和 z 移动元素，或仅沿 z 移动元素。正 z 轴指向观察者。与 x 和 y 不同，z 值不能是百分比。

scale3d(sx, sy, sz), scaleZ(sz)

沿 x、y 和 z 缩放元素。z 缩放会影响变换子元素沿 z 轴的缩放。

rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),

前两种形式仅绕水平和垂直轴旋转元素。角度单位可以是度（deg）、弧度（rad）或百分度（grad）。最后一种形式允许您绕三维空间中的任意向量旋转元素；x、y 和 z 应指定您希望绕其旋转的单位向量（我们将为您将其标准化）。

perspective(p)

此函数允许您在变换矩阵中加入透视。有关 p 的解释，请参见下文。通常透视是通过 -webkit-perspective 属性应用的，但此函数允许您通过类似以下的方式为单个元素获得透视效果

-webkit-transform: perspective(500px) rotateY(20deg);

matrix3d(…)

此函数允许您以列主序指定 16 个值的原始 4×4 齐次变换矩阵。尽情享用吧！

我们还扩展了另一个 CSS 变换属性，并实现了规范中描述的其他四个 3D 相关属性

-webkit-transform-origin 现在接受三个值，允许您指定变换原点的 z 偏移量。

-webkit-perspective 用于创建深度错觉；它根据元素与 z=0 平面的 z 偏移量来确定事物大小的变化。您可以将其想象成您正在从距离 p 的地方观察页面。z=0 平面上的对象以其正常大小出现。z 偏移量为 p/2（在观察者和 z=0 平面之间）的对象看起来会大两倍，而 z 偏移量为 –p 的对象看起来会小一半。因此，大值会产生较小的透视缩短效果，而小值会产生很大的透视缩短效果。500px 到 1000px 之间的值对于大多数内容来说能产生合理的效果。

透视效果的默认原点是元素的边框盒中心，但您可以使用 -webkit-perspective-origin 进行控制。

这是一个展示透视如何工作的示例

透视

-webkit-perspective 的有趣之处在于它不直接影响元素本身。相反，它影响该元素的变换 后代 上的 3D 变换的外观；您可以将其视为添加了一个乘入后代变换的变换。这使得这些后代在移动时都能共享相同的透视。

我们已经描述了如何为元素分配 3D 变换并使其具有三维外观，并带有一些透视。然而，到目前为止，所有效果都只是绘制效果。这些变换后的子元素仍然渲染在其父元素的平面上；换句话说，它们被 展平 了。

当您开始构建具有 3D 变换的对象层次结构时，展平并不是您想要的。您希望父元素和子元素生活在共享的三维空间中，并共享从某个容器传播的相同透视。这就是 -webkit-transform-style 的用武之地。

-webkit-transform-style 有两个值

• flat：这是默认值，并提供上述行为；变换后的子元素被展平到其父元素的平面中（将 3D 变换视为简单的绘制效果）。
• preserve-3d：此值表示被赋值的元素不会将其子元素展平到其中；相反，这些子元素与该元素生活在共享的 3D 空间中。

这是一个展示 transform-style 实际作用的示例

变换样式

因此，常见的模式是内容看起来像这样

<div class="container" style="-webkit-perspective: 600px">
  <div class="box" style="-webkit-transform-style: preserve-3d; -webkit-transform: rotateY(10deg)">
    <div class="leaf" style="-webkit-transform: rotateX(10deg)"></div>
  </div>
</div>

在这里，'leaf' 和 'box' 都共享相同的 3D 空间，因此两者都以容器上指定的透视出现。'box' 也可以通过过渡或动画进行旋转，'leaf' 将随着 'box' 的移动而移动，并保持透视效果。

您在这些演示中可能注意到的一件事是，3D 变换将元素翻转过来，以便您可以看到它的反面，这种情况非常常见。在某些情况下，您不希望元素在这种情况下完全显示（例如，您想将两个元素背对背放置，因此需要隐藏面向观察者的一面）。这就是最后一个 3D 相关属性 -webkit-backface-visibility 的原因。它的两个值——visible（默认）和 hidden——指定当元素被变换使其背面朝向观察者时，该元素是否可见。

这是一个最终示例，展示了 backface-visibility 的实际应用，以及更多 3D 妙趣、动画和过渡

变形魔方

欲了解更多信息，请参阅关于2D 变换、3D 变换、过渡和动画的 CSS 工作草案。在Safari 参考库中也有文档。

我们希望您能尽情享受这些新功能，并与我们分享您的创意。如果您发现错误，请在bugs.webkit.org报告。