CSS 3D动画在IE11中无法正常工作

时间:2014-04-22 15:52:01

标签: css3 animation 3d internet-explorer-11

此动画的行为不像我在IE11中预期的那样。

它应该像书一样打开。

它是在Google Web Designer中创建的(为简洁起见,省略了大部分代码)。

JSFiddle (open in IE11)

然而,以下内容适用于Chrome(唯一的区别是我已经包含了WebKit前缀)。

JSFiddle (open in Chrome)

兴趣点:

@keyframes mykeyframes {
      0% { transform: translate3d(0px, 0px, 2px); }
      100% { transform: matrix3d(-0.9998476952, 0, 0.0174524064, 0, 0, 1, 0, 0, -0.0174524064, 0, -0.9998476952, 0, 0, 0, 2, 1); }
    }

更新 只是注意到,如果你没有动画,那就完全" (所以它只在部分方向打开)然后它在IE11中工作正常 - http://jsfiddle.net/e45q5/3/

UPDATE2 我相信它与此错误有关:https://groups.google.com/forum/#!newtopic/gwdbeta/gwdbeta/EOKnHw5qXmk

1 个答案:

答案 0 :(得分:2)

我无法调试matrix3d值,但我可以通过编辑动画来模拟效果:

 @keyframes mykeyframes {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }
 }

http://jsfiddle.net/e45q5/2/