css - backside-visibility が IE10 で機能しない - Webkit で正常に動作する

Question

私は単純な純粋な CSS の「カードフリップ」アニメーションを作成しています。これは IE10 で動作する必要がありますが、残念ながら私が書いたものは動作しません。

ここのデモから、IE10 で裏側の可視性が機能することがわかります。おそらく、ばかげたことを見落としているだけかもしれません。新鮮な目が役立つかもしれません。

前もって感謝します！

score 7 · Accepted Answer

何人かの Microsoft IE 開発者が私のツイートを見て、すでに修正を加えてくれました!

どうやら IE10 は preserve-3d をサポートしていないようで、この jsFiddle デモンストレーションを作成しました

@reybangoと@sgalineauの助けに感謝します。

score 3 · Accepted Answer

backside-visibility は、要素自体に適用されたときに IE10 で機能します (親に適用された場合、機能しません)。次のように、同じ変換プロパティで組み合わせる必要があります。

。戻る{
  変換: パースペクティブ (1000 ピクセル) 回転 Y (0 度);
}
。フロント{
  変換：パースペクティブ（1000px）rotateY（180deg）;
}

score 3 · Accepted Answer

私は backface-visibility を子要素に適用しただけで、IE10 はとにかく backface を表示します。preserve-3d を削除すると、3D アニメーションの主要な視覚的機能の 1 つが無効になるため、実際には実行可能な回避策ではありません。

残念ながら、@reybango と @sgalineau によって上記で参照されているデモでは、効果の外観が 3D 回転から幅の単純な 2D 変更に変更されるため、実行可能な回避策でもありません。

要するに、記述されている CSS 3d アニメーション仕様をサポートするには、IE10 をアップグレードする必要があるということです。

score 2 · Accepted Answer

(これは、Microsoft の 360° ターンの例が機能する理由についてコメントするためのものです。)

最初にサンプル自体を見てください。MS の回避策により、preserve-3d transform-style プロパティが初期コードから削除されました。

IE10 は preserve-3d をサポートしていないことが判明し、msdn で次のような回避策を提案しています。

transform-style をデフォルトの「フラット」値に設定すると、子要素は親の回転を継承します。したがって、カードの前面/背面の両方が 360° (= 0°) に回転します。ここでのトリックは、DOM で後で来るため、背面が上に表示されることです。

これをもう少し明確にするopacity:0.5ために、両方の例の裏側に追加しました。これで、実際に何が起こっているかがわかります。

したがって、MS の方法はいくつかのシナリオで機能しますが、preserve-3d の実際のサポートがない場合はすべてではありません。

5 に答える 5