ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS レイアウトのヒント: フローティング カード フリップ効果を実装するためのベスト プラクティス
CSS レイアウトのヒント: フローティング カード フリップ効果を実装するためのベスト プラクティス
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2023-10-16 09:07:411228ブラウズ
CSS レイアウトのヒント: フローティング カード反転効果を実装するためのベスト プラクティス
フローティング カード反転効果は、Web デザインで非常に一般的な効果であり、ページを美しくすることができます。よりダイナミックで鮮やかに見えます。この記事では、CSS を使用してフローティング カード反転効果を実現する方法と、具体的なコード例を紹介します。
始める前に、フローティング カードめくりの基本原則を明確にする必要があります。実際、この効果は CSS 変換属性を使用することで実現できます。フリップ効果は、カードを表と裏の2つの部分に分割し、別々に回転させることで実現されます。以下は具体的なコード例です:
<html>
<head>
<style>
.card {
width: 300px;
height: 200px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
transform: rotateY(0deg);
background-color: #e74c3c;
}
.card-back {
transform: rotateY(180deg);
background-color: #3498db;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
<h2>正面</h2>
</div>
<div class="card-back">
<h2>背面</h2>
</div>
</div>
</div>
</body>
</html>上記のコードでは、幅 300 ピクセル、高さ 200 ピクセルの「card」という名前の div を作成します。遠近プロパティを設定すると、遠近効果を作成して反転をよりリアルに見せることができます。
次に、カードの表と裏を含む「card-inner」という div を作成します。変換スタイル プロパティをpreserve-3dに設定すると、前面と背面の遠近関係を維持できます。同時に、トランジション属性を設定することで、フリップ効果のスムーズなトランジションを実現できます。
マウスをカードの上に置くと、:hover 疑似クラス セレクターを設定し、.card-inner のtransform属性の値をrotateY(180deg)に設定することで、カードの反転効果を実現できます。 。
次に、.card-front と .card-back という 2 つの div を作成しました。これらはそれぞれカードの表と裏を表します。 backface-visibility プロパティを hidden に設定すると、カードを裏返したときのちらつき効果を削除できます。
.card-front では、カードの表面を表示するコンテンツを追加できます。 .card-back では、背景色と中央揃えのテキストを使用してカードの裏面を表示しました。
上記のコード例は、フローティング カード反転効果の単純な実装にすぎません。必要に応じて変更および拡張できます。この記事の紹介が、CSS レイアウト スキルをよりよく習得し、よりクールな効果を実現するのに役立つことを願っています。
以上がCSS レイアウトのヒント: フローティング カード フリップ効果を実装するためのベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。