Question

我试图展示动画长方体，但我遇到了渲染问题。我的立方体的侧面板也在Firefox和Chrome的前面板上出现故障。

以下是我原始问题的代码：http://codepen.io/anon/pen/EaPaeg

当原始状态的多维数据集（未在任何地方旋转）且仅添加了前侧和左侧面板时，我已经缩小了Chrome中的问题。以下代码将在Chrome上产生问题：

您可能需要调整面板的宽度以将结果视为透视+实际可能会抑制问题。

＆＃13;

.container {
  width: 100%;
  perspective: 1000px;
}
.c {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  transform-style: preserve-3d;
}
.p {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  backface-visibility: hidden;
}
.front {
  background: #f00;
}
.side {
  background: #0a0;
  transform: rotateY(-90deg) translate3d(-100px, 0px, 100px);
}

＆＃13;

<div class="container">
  <div class="c">
    <div class="p front"></div>
  </div>
  <div class="c">
    <div class="p side"></div>
    <div class="p front"></div>
  </div>
  <div class="c">
    <div class="p side"></div>
    <div class="p front"></div>
  </div>
  <div class="c">
    <div class="p side"></div>
    <div class="p front"></div>
  </div>
  <div class="c">
    <div class="p side"></div>
    <div class="p front"></div>
  </div>
</div>

＆＃13;

所以问题是，这个问题的解决方案是什么？

CSS 3D变换奇怪的行为

0 个答案: