当 CSS 中的第一个 3D 变换在 Webkit 浏览器中得到支持时，人们对此感到非常兴奋。现在，随着其成熟，我们也在 Firefox 中支持 3D CSS。要亲眼看看，请查看最新的 nightly 构建版本之一。

您可以在这个旋转 HTML5 logo 的演示和下面的屏幕截图中看到它们的作用。

这意味着现在我们需要您的支持，在 Firefox 中尝试 CSS 3D 示例，并为您的 CSS 3D 产品和演示添加除 -webkit- 之外的其他扩展。为了证明这是可能的，我们采用了著名的 仅适用于 webkit 的“海报圆圈”演示，并通过添加 -moz-（当然还有其他前缀和一组没有浏览器前缀的指令）使其在 Firefox nightly 上运行。以下是一个简短的摘录

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

您可以在下面的屏幕截图中与 Chrome 并排看到这一点，您也可以亲自试用演示。轻微的卡顿实际上是我的 MacBook Air 每当我使用 ScreenFlow 时都在模仿起飞的喷气式飞机，而不是浏览器。

为了庆祝发布并展示如何将 CSS 3D 作为一种微妙的效果应用，请玩玩使用您最喜欢的浏览器（和一只猫）进行的配对游戏。

Oleg Romashin 也花了一些时间将一些 CSS 3D 演示转换为适用于 Mozilla 的版本，您可以查看 3D 城市以获得更多“哇”的效果。

如果您不熟悉 CSS 3D 变换，这里有一个很好的初学者课程和一个用于创建它们的工具。

旋转的 HTML5 logo 演示还展示了如何检查当前使用的浏览器是否支持 3D 变换。我们不是为所有前缀重复动画帧，而是使用 JavaScript 进行测试，并动态创建 CSS。

function checksupport() {
  var props = ['perspectiveProperty', 'WebkitPerspective',
               'MozPerspective', 'OPerspective', 'msPerspective'],
      i = 0,
      support = false;
  while (props[i]) {
    if (props[i] in form.style) {
      support = true;
      pfx = props[i].replace('Perspective','');
      pfx = pfx.toLowerCase();
      break;
    }
    i++;
  }
  return support;
}
if (checksupport()) {
  var s = '';
  styles = document.createElement('style');
  s += '#stage{-'+ pfx +'-perspective: 300px;}'+
       '#logo{-'+ pfx +'-transform-style: preserve-3d;position:relative;}'+
       '#logo.spin{-'+ pfx +'-animation: spin 3s infinite linear;}'+
       '@-'+ pfx +'-keyframes spin {'+
       '0% {'+
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);'+
       '}'+
       '100% {'+
       '-'+ pfx +'-transform: rotateX(0deg) rotateY(360deg)'+
       ' rotateZ(360deg);'+
       '}}';
  styles.innerHTML = s;
  document.querySelector('head').appendChild(styles);
}

有关创建使用 3D 变换的自定义页面的更多信息，请查看草案规范

与往常一样，如果您发现任何错误，请在bugzilla.mozilla.org 上报告！

因此，请通过支持和测试来奖励我们为 Firefox 的 CSS 引擎带来第三维度的辛勤工作。干杯！