Question

我已使用perspevtive和rotateX/Y/X以及translate在css中创建了一个多维数据集我将屏幕/摄像头放入此多维数据集（目标是创建一个天空盒））。

虽然在Chrome浏览器中没问题，但是当某些脸倾斜时，Firefox似乎在某些脸上显示背景图像时会出现问题。

以下是一个codepen：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 是CSS的Firefox扩展列表，使用得很好。

来自评论：

我对此进行了深入研究，发现硬件加速没有问题，-moz-前缀并没有做任何事情。但是，我确实发现增加perspective对于多维数据集的呈现方式确实产生了影响（对我来说非常重要）。对于我的显示器（1920 x 1080），不失质量并使其真正起作用的最佳点是将perspective: 1000px;设置为perspective: 1250px;我希望这会有所帮助，因为它确实为我修复了它。 / p>

Firefox问题渲染使用透视

1 个答案: