Chrome css3 动画显示错误答案

【问题标题】：Chrome css3 animation display bugChrome css3 动画显示错误
【发布时间】：2014-01-17 21:55:05
【问题描述】：

我正在尝试使用 css3 制作动画。基本上这个想法是将图像分割成立方体并将每个立方体分别旋转 180 度以显示另一侧的图像。

我有 16 个这样的立方体：

<div class="cubeOuter" style="width: 100px; height: 75px; position: absolute; left: 100px; top: 0px;">
  <div class="cube rotate">
    <div class="bottom">
    </div>
    <div class="top">
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="back">
      <img src="someimage.jpg" width="400" height="300" 
      style="position: absolute; display: block; left: -100px; top: 0px;">
    </div>
    <div class="front">
      <img src="anotherimage.jpg" width="400" height="300" 
      style="position: absolute; display: block; left: -100px; top: 0px;">
    </div>
  </div>
</div>

每个块的位置不同，因此它们形成了整个图像。

在 Firefox 中看起来不错，但在 Chrome 和 Opera（使用最新的稳定版本）中，立方体的侧面显示出来了。这是 chrome 正在渲染的图像（边是红色的，如您所见，它们通过图像显示）：

任何想法如何为 Chrome 和 Opera 修复它？

如果每个轴只有 2 个立方体（2x2、1x2、2x1），则不会发生错误

【问题讨论】：

标签： html css google-chrome css-animations

【解决方案1】：

删除以下似乎工作正常：

#rslider-animate .animating {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px; 
}

在这里查看http://jsfiddle.net/JUvnm/3/。

【讨论】：

很好，但这不是一个真正的解决方案，因为立方体现在不是透视的，看起来不正确，特别是如果它是一个更大的图像。此外，动画时背景图像现在会闪烁
即使将透视设置为 20000 像素，那里也有一条细线。
好吧，如果我将它设置为一个高数字，线条会消失，但如果我增加瓷砖的数量，线条会变粗并再次可见。另外，我确实希望动画看起来自然，远处的东西看起来更小，所以透视是必须的，它不能是这么大的数字
看看这里stackoverflow.com/questions/8627707/…
据我所知，这是一个不相关的问题

【解决方案2】：

解决了。为 .cubeOuter 而不是 .animating 设置视角可以解决它，不知道为什么，但它可以工作。

#rslider-animate .animating .cubeOuter {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
     perspective: 1000px;
}

小提琴：http://jsfiddle.net/JUvnm/4/

【讨论】：