html - Firefox 问题渲染旋转图像与透视

Question

我用 perspevtive 和 rotateX/Y/X 在 css 中创建了一个立方体，并用一些 translate 我把屏幕/相机进入这个立方体(目标是创建一个天空盒)。

虽然在 Chrome 中没问题，但当这些面倾斜时，Firefox 似乎无法在某些面上显示背景图像。

例如，这是一个代码笔:http://codepen.io/poolboy/full/MaNgVK/

HTML

<section class="cube-container">
  <div id="cube">
    <figure class="front"></figure>
    <figure class="back"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
    <figure class="top"></figure>
    <figure class="bottom"></figure>
  </div>
</section>

CSS

body {
  overflow: hidden;
}
.cube-container {
  width: 1024px;
  height: 1024px;
  position: relative;
  perspective: 1000px;
  margin: auto;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  /* animation: anim  20s linear infinite; */
}

#cube figure {
  margin: 0;
  width: 1024px;
  height: 1024px;
  display: block;
  position: absolute;
  /* border: 1px solid rgba(0,0,0,0); */
  backface-visibility: hidden;
}
#cube .front  { background: url(http://www.poolboy.fr/images/front.jpg) ; transform: translateZ( 511px
) rotateY(   180deg ); }
#cube .back   { background: url(http://www.poolboy.fr/images/back.jpg) ; transform:  rotateX( 180deg ) translateZ( 511px ) rotateZ(180deg) rotateY(   180deg ); }
#cube .right  { background: url(http://www.poolboy.fr/images/right.jpg) ; transform: rotateY(  90deg ) translateZ( 511px ) rotateY(   180deg ); }
#cube .left   { background: url(http://www.poolboy.fr/images/left.jpg) ; transform: rotateY( -90deg ) translateZ( 511px ) rotateY(   180deg ); }
#cube .top    { background: url(http://www.poolboy.fr/images/top.jpg) ; transform: rotateX(  90deg ) translateZ( 511px ) rotateY(   180deg ); }
#cube .bottom { background: url(http://www.poolboy.fr/images/bottom.jpg) ; transform: rotateX( -90deg ) translateZ( 511px ) rotateY(   180deg ); }

@keyframes anim {
  from {
    transform: translateZ(511px) rotateY(0deg);
  }
  to {
    transform: translateZ(511px) rotateY(360deg);
  }
}
#cube { 
  /* transition: transform 1s; */
  transform: translateZ(512px) rotateY(10deg);
}

有没有办法确保图像在 Firefox 中正确显示？

谢谢

Answer 1

Firefox 不使用 transform-style，它使用 -moz-transform-style。尝试在您的 CSS 代码中替换它。确保 transform-style: preserve-3d; 变成 -moz-transform-style: preserve-3d;

Here 是 Firefox 的 CSS 扩展列表，好好用吧。

来自评论:

我对此进行了更深入的研究，发现硬件加速没有问题，而且 -moz- 前缀实际上没有任何作用。但是，我确实发现增加 perspective 确实对立方体的渲染方式产生了影响(对我来说影响很大)。对于我的显示器 (1920 x 1080)，不损失质量并使其实际工作的最佳点是将 perspective: 1000px; 设置为 perspective: 1250px; 我希望这很有帮助，因为它确实为我解决了这个问题。