CSS3 画像反転切り替えのケースと重要な属性の分析

画像の反転切り替えは、CSS3 を使用せずに、通常、JS を使用してアニメーションを実装し、要素の幅と左、または高さと上部を同時に操作して反転効果をシミュレートし、必要に応じて画像の切り替えを変更します。 。

私は偶然 CSS3 ソリューション http://www.webhek.com/css-flip/ を発見しました。すぐに学び、次のように要約してください。

最初にコードをアップロードします（コードのほとんどは上記のリンクからコピーされています。大きな互換性の問題があるため、慎重に使用してください）

HTML:

リーリー

CSS:

リーリー

• 一番外側のコンテナ要素にアニメーション領域全体のパースペクティブ属性を設定します。
• 外側のコンテナ要素がマウスオーバー イベントに遭遇すると、内側にカードを格納しているコンテナが 180 度回転します。ここで回転速度も制御されます。回転値を -180deg に設定すると逆回転になります。
• は、カードの表と裏の要素が同じ位置で互いにブロックされるように絶対に配置する必要があることを意味します。 backface-visibility プロパティは hidden に設定されているため、裏返したときに各カードの裏面は見えません。
• カードの表面が上になるように、カードの表面を裏面よりも高い Z インデックス値に設定します。
• バックカードを180度回転させて、バックの役割を果たします。

コピー終了。CSS には特別な注意が必要な重要なコメントがあります。

perspective プロパティは、ビューからの 3D 要素の距離をピクセル単位で定義します。直感的な現象は、内側の要素が書かれていない場合、または属性値が 0 の場合、反転すると外側の境界線からはみ出し、外側の境界線内でのみ変更されます。

そして、属性値は、反転する必要がある要素の幅と高さに合わせて特別な注意が必要です。小さすぎるとオーバーフローし、多すぎると誇張されます。 0に設定してもほとんど違いはありません。違いの効果は下の写真に示されています

transform-style:preserve-3d;transform-style 属性は、3D 空間でネストされた要素をレンダリングする方法を指定します (w3cschool からコピー)。

フリップコンテナとフリッパーの両方を設定する必要があります。フリップコンテナが設定されていない場合、オーバーフロー 3D エフェクトは、コンテナを反転した後も表示されます。背面の可視性: 非表示では効果を反映できません。

さらに厄介なのは、IE11でもtransform-styleがサポートされていないことです。

つまり、IE と互換性のある別の解決策があります。これは、コンテナーを反転するのではなく、表と裏を同時に反転することです。幸いなことに、IE は引き続き backface-visibility: hidden をサポートしているため、反転効果は同じです。前の解決策と同様に。

HTMLは次のとおりです:

リーリー

表裏を直接反転するため、フリッパーが冗長になりフリッパーを取り外します。

CSS コードは次のとおりです (多くのテストの後、さまざまなブラウザをサポートするために最善を尽くし、CSS3 反転をサポートしていないブラウザはダウングレードし、切り替え効果を維持しました)

リーリー

上記には不要な互換コードが多く含まれている可能性があり、レベルが限られているため、より簡潔な記述方法の交換を歓迎します。

他の状況でホバーを使用して要素の反転をトリガーする場合は、次のように使用する必要があります。幅と高さが固定された親要素がトリガーされ、子要素が反転します

。

リーリー

次のように要素のホバー上で反転を直接トリガーすると、使用法に大きな問題が発生します。要素の反転プロセス中に要素の領域が小さくなり、カーソルが要素から離れるため、要素が復元され、ホバーが解除されます。トリガーされて小さくなり、滑らかさがなくなります

リーリー