IE11에서 CSS 3D 애니메이션이 올바르게 작동하지 않습니다.

Question

이 애니메이션은 IE11에서 예상대로 동작하지 않습니다.

책처럼 열어야합니다.

(간결하게하기 위해 코드의 상당 부분을 생략 함)에서 작성되었습니다. 크롬에서 다음을 수행 작업 (유일한 차이점은 내가 웹킷 접두사 포함 시켰있다) 그러나

JSFiddle (open in IE11)

. 관심의

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/

갱신 2 나는 그것이이 버그에 관련된 믿을 : https://groups.google.com/forum/#!newtopic/gwdbeta/gwdbeta/EOKnHw5qXmk

Answer 1

나는 matrix3d 값을 디버깅 할 수없는,하지만 난 당신의 애니메이션을 편집하여 효과를 에뮬레이션 할 수 있습니다 :

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

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