CSS のみを使用してホバー時に 3D CSS カードを回転するにはどうすればよいですか?

ホバー時の CSS 反転可能な 3D カード効果

このチュートリアルでは、CSS のみを使用して 3D カード反転効果を実現することを目指します。カードの上にマウスを置くと、カードは表面から裏面までスムーズに回転します。

コードの実装:

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

説明:

1. まず、希望の高さ、幅、遠近感を持つコンテナ クラス .card を定義します。
2. .card コンテナ内に、2 つの子要素 ​​.front と .back を作成します。カードの表と裏を表します。
3. .front と .back の両方を .card コンテナー内に絶対に配置し、その寸法を幅と高さ 100% に設定します。
4. 適用します。両方の要素のtransformプロパティへの遷移により、ホバー時のスムーズな回転が可能になります。
5. 反転アニメーション中のちらつきを防ぐために、backface-visibilityをhiddenに、transform-styleをpreserve-3dに設定します。
6. 最初に、transform:rotateY(180deg); を使用して背面が Y 軸に沿って 180 度回転されます。
7. ホバー時に、前面を 180 度回転し、背面を 360 度回転して、反転します。

以上がCSS のみを使用してホバー時に 3D CSS カードを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。