IE10でページめくり効果を作ってみました。
IE10 はサポートしていないため、各面を個別transform-style: preserve-3d;
に反転する必要があります。最近のブラウザでは問題なく動作しますが、IE10 ではパースペクティブがありません。perspective: 1000px;
コンテナ(.flipper)に書き込むと、backface-visibility/z-index が正しく動作しません。
tis jsfiddle をご覧ください: http://jsfiddle.net/wG6gk/2/
CSS に含まれている理由xpersepectiveはわかりませんが、IE10 は CSS で接頭辞が付けられていませんが、パースペクティブ プロパティには深さのために何らかの単位が必要perspective: 1000です。同様に、ブラウザーはそれがどの単位であるかを認識していないため、適用されません。幅や高さなどのように、px、em などを適用する必要があります。プロパティの単位 (およびピクセル単位) を想定する唯一のブラウザーperspectiveは Webkit ブラウザーであり、それがtransformプロパティ内にある場合のみです。
少し調べてみると、マイクロソフトは次のように述べています。
W3C 仕様では、このプロパティのキーワード値preserve-3dを定義しています。これは、平坦化が実行されないことを示します。現時点では、Internet Explorer 10 はpreserve-3dキーワードをサポートしていません。これを回避するには、子要素の通常の変換に加えて、親要素の変換を各子要素に手動で適用します。
したがって、その道をたどりたい場合は、今のところ、アドバイスされた修正を実装する必要があります。
そうでない場合は、幸運です。スムーズに移行できるように時間を費やしました。もともとあなたのフィドルでは、私の意見では、非常にぎこちなく変換していて、スタイルが多すぎたので、この JSfiddle のテクニックが役立つはずです: http://jsfiddle.net/NAy2r
したがって、基本的にフロント コンテンツはコンテナ div に存在し、バック コンテンツはコンテナ div 内に存在するバック div に存在します。これは、Apple の HTML5 カード フリップ デモと非常によく似ていますが、backface-visibility.
Apple がそのデモを公開した時点ではbackface-visibiity、Chrome または Firefox では動作しませんでした。Chrome にはパースペクティブの概念がいくつかありましたが、いずれもありませんでしたbackface-visibility。そのため、要素を反転すると、背面まで透けて見え、背面のコンテンツも両側から透けて見えます。ただし、Safari では、最初にこれらの概念を理解していたので完璧です。
その後の数か月の Chrome のさらなる更新で、Chrome はそのプロパティを理解しましたが、裏返したかどうかに関係なく、文字どおりに適用され、背面は完全に隠されていました。どうしても背中を完全に隠すつもりなら、このプロパティを持っている意味は何ですか？などを申し込んで裏表を見せてもOK !!display:none
transform:rotateY(180deg)そして、それが今日のIEの立場であり、他の最新のブラウザーのように要素の「裏側」を認識しません（裏側と見なされる要素）。そのため、要素が反転backface-visibilty: hiddenすると、Chrome の場合と同じように文字どおり取得されます!
したがって、このフィドルはコンテナー div の AnimationStart イベントをリッスンし、アニメーションの開始時にアニメーションの継続時間を見つけ、それを使用してアニメーションの途中で計算するため、アニメーションが途中である場合は、そのように変更backface-visibilityされます。visibleアニメーションは想定どおりにスムーズに移行します。
これは開発するのが面倒でした。IE10 は、最初に処理するのに時間がかかるため (おそらく jQuery)、多少一貫性がありません。救済、頭痛の欠如、燃えるような赤い目に注目してください。周りの空気が冷たくなり、やっと息ができるようになりました。
編集：追加するのを忘れていましたが、アニメーションまたはトランジションのタイミングが異なる場合、このスクリプトのタイミングを調整する必要があります。これは、現時点では線形トランジションでのみ機能するためです...