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

我在css中用

perspevtive

和

rotateX/Y/X

创建了一个立方体，并用一些

translate

将屏幕/摄像机放入这个立方体（目标是创建一个skybox）

虽然在Chrome中没有问题，但Firefox似乎在某些人脸上显示背景图像时遇到了一些问题

下面是一个代码笔示例：

Html

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

---

谢谢

Firefox没有使用

转换样式

，它使用

-moz转换样式

。尝试在CSS代码中替换它。确保

变换样式：preserve-3d变成
-moz变换样式：preserve-3d

是一个针对CSS的Firefox扩展列表，请好好使用它

评论如下：

我对此进行了深入研究，发现硬件加速没有问题，
-moz-
前缀实际上没有任何作用。然而，我确实发现增加透视图对立方体的渲染方式产生了影响（对我来说是一个相当大的影响）。对于我的显示器（1920 x 1080），不丢失质量并使其实际工作的最佳点是设置
透视：1000px到
透视图：1250px我希望这能有所帮助，因为它确实为我解决了问题。
尝试添加-moz变换样式：preserve-3d；使用-moz-作为此属性的前缀没有区别，示例如下：。在您的链接中，
transform style
位于“以前的前缀属性现在是标准的”@simonLeClerc我对此进行了深入研究，发现硬件加速没有问题，
-moz-
前缀实际上没有任何作用。然而，我确实发现增加透视确实对立方体的渲染方式产生了影响（对我来说，这是一个相当大的影响）。对于我的显示器（1920 x 1080），不丢失质量并使其实际工作的最佳点是设置
透视：1000px到
透视图：1250px我希望这会有所帮助，因为它确实为我在Firefox上修复了它！
<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>

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);
}