2

CSS トランスフォームとトランジションを使用して「カード フリップ」効果を作成しようとしています。カードを表すために a を使用し、カードの表と裏の面を表すために<div>2 つの子を使用しています。<div>両方の面が完全に重なり合って配置されており、後者は 180 度変換されて逆になっています。

現在のアプローチを説明するために jsFiddle を作成しました。

http://jsfiddle.net/sCyLV/1/

この効果は、Chrome と Firefox (最新バージョン) で意図したとおりに機能します。ただし、IE10 では、カードは両方の軸で反転しているように見え、カードが反転したときにカードの裏側は表示されません。表側のカードの裏側が見えるだけです。誰かが理由を知っていますか？

また、この効果を達成するための代替案があればぜひ聞きたいです。唯一の機能要件は、この効果が同じ方向に反復可能でなければならないことです。つまり、カードは y 軸を中心に回転しているかのように連続ループで反転します。反転動作を制御できるようになったら、180 度回転するたびに裏面のコンテンツを動的に交換し、向きを変えるたびに新しいコンテンツが表面に表示されるようにします。

4

1 に答える 1

2

rotateY(180deg)inを使用すると、意図したとおりにアニメーションが機能しますtransform。

これにより、フリップ効果が正常に機能しますが、z-indexまだ機能していません。これを回避するために、divIE10sideにはpreserve-3d.

これがIE10のフィドルです（注：他のブラウザーは壊れていますが、ブラウザー固有のプロパティを複製する必要があるだけです）

于 2013-05-23T00:07:52.283 に答える