0

私はこのタスクを数時間達成しようとしてきましたが、CSS / Javascript のクロスブラウザーの組み合わせが機能していないようです。

基本的に、私がやろうとしているのは、CSS と Javascript を使用した「カード フリップ」です。このコードは Google Chrome では素晴らしく動作しますが、IE9/10 では動作しないようです。jsFiddleのサンプルを次に示します。

IE10 で同じ jsfiddle を表示すると、カードの裏側しか表示されず、アニメーションが機能しません。

助言がありますか？

Ignore this - need a code snippet to post the above jsFiddle link.
4

1 に答える 1

0

jsFiddleサンプルは、Chrome (より正確には Webkit ブラウザー) でのみ機能します。ここでは css -webkit プロパティのみが使用されているため、これは非常に理にかなっています。

使用する Card Flip アニメーションは、IE10 でも完全に機能するはずです (また、Firefox は質問に記載されていません)。

使用する必要がある 3D Transforms CSS プロパティの詳細については、W3school ページを確認してください。

今問題: IE9。

  1. IE9 は CSS アニメーションを提供しません。Javascript (jquery animate) でフォールバックを使用する必要があります。
  2. IE9 は回転可能性を提供しません。しかし、それはflipXを提供します。はい、3D 効果はありませんが、反転効果はあります。

IE9 のフリップ プロパティは次のとおりです。

filter: FlipH;
-ms-filter: "FlipH";
于 2013-08-22T11:33:42.887 に答える