CSS を使用してカード反転効果を実現する方法と例-CSSチュートリアル-php.cn

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

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

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

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

  正面
 
  背面

ログイン後にコピー

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 サイトの他の関連記事を参照してください。