Firefox 使用透视渲染旋转图像问题

Question

我用 perspevtive 和 rotateX/Y/X 和一些 translate 在 css 中创建了一个立方体，我将屏幕/相机放入这个立方体（目标是创建一个天空盒）。

虽然在 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; 我希望这会有所帮助，因为它确实为我修复了它。