CSS を使用してカード反転効果を実現するためのヒント

CSS を使用してカード反転効果を実現するヒント

CSS は、フロントエンド開発で最も一般的に使用されるテクノロジの 1 つであり、ページを美しくするだけでなく、クールな特殊効果も実現します。その中でもカードリバース効果は非常に一般的で魅力的な効果です。この記事では、CSS を使用してカード反転効果を実現する方法と、具体的なコード例を紹介します。

1. 基本構造

まず、2 つの div を含む HTML 構造を準備する必要があります。1 つの div はカードの表面を表し、もう 1 つの div はカードの裏面を表します。カード。例は次のとおりです。

2. CSS スタイル

次に、カードの表と裏の CSS スタイルと、いくつかの基本スタイルを設定する必要があります。カードコンテナ全体に。例は次のとおりです。

.card-container { perspective: 1000px; /* 设置透视视角 */ } .card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; /* 设置元素在3D空间中保持原有形状 */ transition: transform 0.5s; /* 设置过渡效果的时间 */ } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* 隐藏背面元素 */ } .card-front { transform: rotateY(0deg); /* 设置初始正面朝向 */ } .card-back { transform: rotateY(180deg); /* 设置初始背面朝向 */ }

3. フリップ アニメーション効果

最後に、マウス ホバーやクリックなど、フリップ アニメーションをトリガーするイベントをカードに設定する必要があります。イベント。 :hover 疑似クラスを使用してマウスホバー時に反転効果をトリガーし、JavaScript を使用してクリックイベント時に反転効果をトリガーできます。例は次のとおりです。

.card:hover { transform: rotateY(180deg); /* 鼠标悬停时翻转到背面 */ } .card.active { transform: rotateY(180deg); /* 点击时翻转到背面 */ }

var card = document.querySelector('.card'); card.addEventListener('click', function() { card.classList.toggle('active'); /* 切换active类名来触发翻转效果 */ });

上記のコードを使用すると、単純なカード反転効果を実現できます。マウスをカードの上に置くと、カードはすぐに裏に戻り、カードをクリックすると、カードはゆっくりと裏に戻ります。特定の効果は実際のニーズに応じて調整されます。

概要:

CSS を使用してカード反転効果を実現するのは複雑ではありません。表と裏を含むカード構造を準備し、いくつかの CSS スタイルと反転をトリガーするイベントを設定するだけです。効果。以上、CSSを利用してカード反転効果を実現するテクニックと、具体的なコード例をご紹介しましたので、ご参考になれば幸いです。

以上がCSS を使用してカード反転効果を実現するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。