html5 - Chrome中的纯CSS3动画和旋转无法正确返回适当的状态

我试图使用CSS3类更改来管理一系列的旋转、收缩效果和突出显示效果，以便将JS的使用限制为仅应用类更改。我也被限制使用铬。
我遇到了这样一个问题：浏览器似乎没有遵守类指定的转换。
我的目标是通过以下步骤：
完整动画
暂停并缩小动画
通过将两个图像拉出并旋转到正确的视角来突出显示它们
将图像还原到暂停的堆栈中，使其处于对等方的正确旋转位置
还原完整动画
为此，我将图像的默认状态（在这种情况下都是猫）定义为暂停动画中的旋转：

/* Define the default bevaviour as a paused rotation */
 .cat {
    position: absolute;
    left: 20px;
    -webkit-transform: translateX(-60px) translateY(100px) translateZ(0px) rotateX(60deg) rotateY(0deg) rotateZ(30deg);
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 50%;
    opacity: 0.8;
    -webkit-animation: all 10s linear;
    -webkit-animation-iteration-count:infinite;
    width: 500px;
    -webkit-animation-play-state: paused;
    -webkit-transition: all;
    transition: all 4s ease;
}

父div应用了类以控制动画行为，然后是其他类以控制突出显示行为-详细信息请参阅：
http://jsfiddle.net/kaiesh/m3str/5/
但是这会导致高亮显示工作不正常，高亮显示的图像不会旋转到正确的方向。
我试图通过对处于运行状态的图像应用动画类来解决这个问题（我已经完成了示例中的一个cat图像）-您可以在这里看到：
http://jsfiddle.net/kaiesh/m3str/6/
但是，在第二个示例中，旋转会四处跳跃，然后，当还原到收缩版本时，其对等点不会停止旋转，即使动画播放状态标记为暂停。
任何见解都将不胜感激！

最佳答案

如果要在变换时停止并重播动画，则不能更改元素的变换。或者，也许更好，这样做太难了。
如果在另一个元素中处理这个问题会更好；在这种情况下，图像是它的精灵。
首先，让我们为动画添加一个易于检索的属性：

@-webkit-keyframes allcats {
    0% {
        -webkit-transform: rotateX(60deg) rotateZ(0deg) rotateY(0deg);
        z-index: 0;}
  100% {
        -webkit-transform: rotateX(60deg) rotateZ(360deg) rotateY(0deg);
        z-index: 360;}
}

这是因为变换是作为一个矩阵来检索的，而且获取角度非常复杂。这样，检索z索引就可以直接知道旋转是什么。
现在在图像上设置相反的旋转，以使它们保持直线

$('#stage-2').click(function (e) {
    var step = $("#image2").css("z-index");
    $("#image2").addClass("upper");
    $("#image3").addClass("lower");
    $("#image2 img").css("webkitTransform", "rotate(-"+step+"deg)");
    $("#image3 img").css("webkitTransform", "rotate(-"+step+"deg)");
});

将旋转重置为无：

$('#stage-3').click(function (e) {
    //$("#left1 .cat").addClass("cat-stopped").removeClass("cat-rotate");
    $("#image2").removeClass("upper");
    $("#image3").removeClass("lower");
    $("#image2 img").css("webkitTransform", "");
    $("#image3 img").css("webkitTransform", "");
});

做得很顺利

.cat img {
    transition: all 4s ease;
}

fiddle