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

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

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

1. 基本構造

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

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <!-- 正面内容 -->
    </div>
    <div class="card-back">
      <!-- 背面内容 -->
    </div>
  </div>
</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 サイトの他の関連記事を参照してください。