internet-explorer - IE10 破坏了在 Webkit 和 Firefox 中工作的 CSS3 3D 动画

Question

我在两个divs 上有一个简单的水平 CSS3 3D 翻转效果，在 Chrome、Safari 和 Firefox 中运行良好。但是 IE10 把它搞砸了，并且看起来像在所有轴上做了一些奇怪的附加动画。

我已经追踪到附加translateX动画。如果我删除它并且只做rotateYIE10 的行为就像其他浏览器一样。但我不想放弃 x 轴动画。

请看一下这个 jsFiddle 中的问题（为了清楚起见，只有 IE 和 Webkit）：http: //jsfiddle.net/uJnHE/5/

Answer 1

删除您的 webkit 前缀并添加translateX(0)，因为 IE10 beta 不知道如何在未声明的转换属性和translateX(-200px)

@keyframes flipHotelInfoLeft {
  0% {
      animation-timing-function: ease-in;
      transform: rotateY(180deg) translateX(0);
  }
  50% {
      transform: rotateY(90deg) translateX(200px);
  }
  100% {
      animation-timing-function: ease-out;
      transform: rotateY(0) translateX(0);
  }
}