IE11/Edgeのrotate3dでのみアングルをアニメーションする

Question

rotate3d()でアングルの変化をアニメーション化して、IE11とEdgeで動作するようにする方法がわかりません。 ChromeとFirefoxで意図したとおり

以下の作品、それは少し本の開口部のページのように見えることに：にいくつかの追加のスタイリングで上記を実証

<div class="canvas"> 
    <div class="page"> 
    This is the content on the page. 
    </div> 
</div> 

---

.canvas { perspective: 1000px; } 

.page { 
    transform: rotate3d(0, 1, 0, -65deg); 
    transform-origin: 0 50%; 
    transition: transform 1s; 
} 

    .page.opening { 
    transform: rotate3d(0, 1, 0, -125deg); 
    } 

Here's a fiddle見えるようにする。

これはChromeとFirefoxで動作しますが、IE11とEdgeではアニメーションがブックのページのように「開く」ようになりますが、ブラウザがy軸をアニメーション化しようとしているように「回転」します。

私が理解できる限り、y軸は2つの状態の間で変化しないので、IE/Edgeはこれを行うべきではありません。

IE/Edgeで正しく動作させるための回避策はありますか？

Answer 1

この質問のためにフィドルを組み立てると、私は部分的な答えに遭遇しました。それは信じられないほど簡単です。だから私は、私がやったようにそれを検索しようとしている人たちのためにこれをまだ投稿していると思った！私はIE /エッジはまだChromeとFirefoxのとは異なり、各軸をアニメーション化された理由は全くわからないものの

、この場合は本当に簡単な解決策があります：を軸は同じに滞在しているので、あなたはしないでくださいrotate3d()をまったく使用する必要があります。

ので、この場合は：

transform: rotate3d(0, 1, 0, -65deg); 

は単純に変更することができます：

transform: rotateY(-65deg); 

IE /エッジはその後、回転だけではなく、軸をアニメーション化します - あなたが期待するようそれに。

Here's an updated fiddleは、Chrome/Firefox/IE11/Edgeで動作します。