CSS のみを使用して 3D カードの反転効果を実現するにはどうすればよいですか?

CSS を使用して 3D カードを反転する方法

このタスクは、CSS のみを使用して、カードが反転する 3D カード反転エフェクトを作成することです。

CSS のみの反転効果

実装を簡素化するために、次の CSS コードを使用します:

<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>

説明

カード コンテナには遠近法が適用され、3D 空間のような錯覚を与えます。前面と背面の両方がコンテナ内に絶対的に配置されます。また、背面を非表示にして 3D 性質を維持するために変形されます。

カードの上にマウスを置くと、次の変形が発生します:

• 前面が 180 度回転します。 Y 軸を回転させ、背面を表示します。
• 背面が Y 軸を中心に 360 度回転し、反転が完了します。

この CSS のみのテクニックにより、スムーズでリアルな表現が可能になります。ホバー時の 3D カード反転効果。

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