我有以下标记：
<div class="cube trigger cuberotate">
<div class="face init f z"></div>
<div class="face init l y"></div>
<div class="face init b z"></div>
<div class="face init r y"></div>
<div class="face init u x"></div>
<div class="face init d x"></div>
</div>
它类似于一个三维立方体，每个面都旋转并转换到它们的正确位置，我让立方体在面部的父级上使用动画旋转。
这是相关的css：
.cube {
position: absolute;
cursor: pointer;
width: 120px;
height: 120px;
top: 0;
left: 0;
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 120px;
height: 120px;
border: 0px solid #fff;
background: #c82222;
transform-origin: 50% 50%;
opacity: 1;
padding: 0px;
-webkit-touch-callout: none;
user-select: none;
transition: all 0.5s ease-out;
}
我想让文件准备好时立方体出现在一张脸上，所以我只是扔了一些javascript，基本上是每500毫秒的一个间隔，它只是删除了 .init 超越的类 opacity: 1 价值 .face 类。
(function($) {
'use strict';
// Some selectors and shit...
var $face = $('.face').first(),
speed = 500,
timer = null;
$(document).ready(function(){
// Start showing faces
timer = window.setInterval(function(){
var $next = $face.next();
$face.removeClass('init');
if(!$next.hasClass('face')) {
window.clearInterval(timer);
}
$face = $next;
}, speed);
});
})(jQuery);
// And the additional CSS below
.face.init {
opacity: 0;
}
在一个理想的世界中，这段代码应该有效，但是我在Google Chrome上面临一个问题，在删除类后，不透明度不会转换回1，从而使多维数据集完全不可见。如果右键单击并检查它再次可见。
好奇地在Safari上，这也是一个基于webkit的浏览器，这根本不会发生，而且这些面孔在他们应该做的时候会显示出一个。
我试着用两者 .animate() 来自jquery，还尝试了jquery插件 过境
- 现在，Safari和Chrome不应该以相同的方式运行，或者尽管渲染引擎是相同的，但是引擎盖下是否存在重大差异？
- 这是我做错了吗？
- 这有一个解决方法吗？
这是我的笔： http://codepen.io/luigimannoni/pen/FstKG/
谢谢
更新：
我在Mac上以及Windows 7上的Chrome上都尝试过，它们的行为方式相同（不同的机器也是如此）
还尝试了Firefox，它像Safari一样无缝地工作，除了没有发生的旋转动画（但我不考虑Firefox，因为它是一个不同的浏览器）。
其他更新：
移动设备上的Chrome（iOS和Android）在桌面上的工作和行为类似于Safari。
另一个更新：
在四处玩耍之后，我发现它可能是一个浏览器错误，Chrome Canary可以正常运行。 我在facebook上发布了这个，我从开发人员那里得到了一些很好的解决方法，我觉得这很有创意。
参与的第一个具有rgba（）背景颜色并进行alpha更改而不是在不透明度上进行转换： http://codepen.io/anon/pen/IjsBL
第二个涉及一些javascript编码，迫使浏览器重绘每个帧的面： http://codepen.io/anon/pen/Hofzb
我正在开始赏金，看看stackoverflow可以在这做什么！