Chrome css3动画显示错误

Question

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

这是fiddle

我有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和Opera的问题？

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

Answer 1

解决了它。 设置.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/

Answer 2

删除以下内容似乎工作正常：

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

点击http://jsfiddle.net/JUvnm/3/。