純粋な CSS を使用して 3D カードを簡単に裏返すにはどうすればよいですか?-CSSチュートリアル-php.cn

純粋な CSS を使用して 3D カードを簡単に裏返すにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-23 17:42:40

オリジナル

681 人が閲覧しました

How to Effortlessly Flip a 3D Card Using Pure CSS?

CSS を使用して 3D カードを簡単に反転

目を引く 3D 効果を備えたカードを反転すると、ユーザーエクスペリエンスが向上します。この記事では、CSS のみを使用してホバーでアクティブ化されるカード反転アニメーションの作成について詳しく説明します。

まず、意図した効果を維持しながら実装を簡素化するコード例を見てみましょう。

.card {<br> 位置: 相対;<br> 幅: 50vh;<br> 高さ: 80vh;<br> パースペクティブ: 500px;<br> マージン: 10vh auto 50vh;<br>}</p>
<p>.front,<br>.back {<br> 位置: 絶対;<br> 幅: 100%;<br> 高さ: 100%;<br> トランジション: 変換 1 秒;<br> 背面可視性: 非表示;<br> 変換スタイル: 保持 3d;<br>}</p>
<p>。フロント {<br> 背景色: #66ccff;<br>}</p>
<p>.back {<br> 背景色: #dd8800;<br> 変換: 回転 Y(180 度);<br>}</p>
<p>.card:hover .front {<br> 変換: 回転 Y(180 度);<br>}</p>
<p>.card:hover .back {<br> 変換: 回転 Y(360 度);<br>}

<div class="card"><br> <div class="フロント"><span>フロント<br><br> <br> <br> </p> <p> </p> <p> </p> <p> </p> /div>

このコードは、表と裏の 2 つの面を持つカードを作成します。フリップ効果はホバー時にトリガーされます。カードの上にマウスを置くと、前面が 180 度回転し、背面が 360 度回転します。このアニメーションの鍵は、パースペクティブ、transform-style、transform、および CSS プロパティの組み合わせにあります。遷移。これらのプロパティは連携して 3D オブジェクトの錯覚を作成します。このコードを実装することで、Web サイト上に美しく魅力的な 3D カード反転効果を作成し、視覚的な魅力とユーザーインタラクションを強化できるようになります。

以上が純粋な CSS を使用して 3D カードを簡単に裏返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。