CSS を使用してカード反転効果を実現する方法と例

CSS を使用してカード反転効果を実現する方法と例

現代の Web デザインでは、反転効果は Web に追加できる一般的でクールな特殊効果です。ページ。動きとインタラクティブ性の感覚を追加します。 CSS 変換プロパティとアニメーション プロパティを使用すると、カードをひっくり返す効果を簡単に実現できます。この記事では、基本的なカード反転効果を紹介し、読者の参考となる具体的なコード例を示します。

カード反転効果とは、カードを前から後ろ、または後ろから前にひっくり返すアニメーション効果を指します。この効果を実現するには、CSS 変換プロパティとアニメーション プロパティを使用する必要があります。具体的な手順は次のとおりです。

1. 「カード」スタイルを使用して HTML 要素を定義します。この要素は、前部と後部を持つ div にすることができます。 :hover や :focus などの CSS 疑似クラス セレクターを使用して、マウスをホバーまたはクリックしたときに反転効果がトリガーされるように設定できます。

<div class="card">
  <div class="front">
    <h2>正面</h2>
  </div>
  <div class="back">
    <h2>背面</h2>
  </div>
</div>

2. CSS 変換プロパティを使用して、背面を 180 度回転して非表示にします。この効果を実現するには、transform:rotateY() を使用できます。さらに、CSS トランジション属性を使用して反転効果をスムーズにトランジションすることもできます。

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px; /*设置视角*/
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /*将背面隐藏*/
}

.back {
  transform: rotateY(180deg); /*将背面旋转180度*/
}

.card:hover .front, .card:focus .front {
  transform: rotateY(180deg); /*鼠标悬浮或点击时将正面旋转180度*/
}

.card:hover .back, .card:focus .back {
  transform: rotateY(0deg); /*鼠标悬浮或点击时将背面旋转至初始状态*/
}

上記のコードでは、.card 要素に視点属性を設定します。これは、観察者と 2 次元変換要素の間の距離を定義し、3 次元効果を生み出します。 .back要素のrotateY属性と.front要素のtransform属性を設定することで、それぞれカードの裏と表の回転ステータスを定義します。 :hover または :focus 擬似クラス セレクターを使用して、マウスがホバーしているときとクリックしているときに反転効果をトリガーする状態をそれぞれ定義します。同時に、トランジション属性のトランジションにより、スムーズなトランジションアニメーション効果を実現します。

上記は、CSS を使用してカード反転効果を実現する基本的な方法と例です。 CSS の豊富な機能を利用することで、豊富なスタイルでより多くの反転効果をカスタマイズできます。読者は、自分のニーズと創造性に応じてこの効果をさらに拡張および最適化し、より魅力的なページ インタラクション効果を実現できます。

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