CSS Transformによる3Dカードフリップエフェクト

rotateYによる3Dカードフリップ

3Dカードフリップは最も人気のあるCSS transformエフェクトの一つです。rotateY(180deg)とperspectiveを使ってリアルなカード裏返しアニメーションを作成します。

CSS

.card-container {
  perspective: 800px;
  width: 300px;
  height: 200px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

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

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

主要なプロパティ

プロパティ	目的
perspective	コンテナに3D深度を作成
transform-style: preserve-3d	子要素が3D空間に存在することを許可
backface-visibility: hidden	各面の裏側を非表示
rotateY(180deg)	垂直軸を中心にカードを反転

Perspective値

• 600-1000px：ほとんどのカードに適した自然な見た目のフリップ
• 400px以下：極端なパースペクティブ、非常にドラマチック
• 1500px以上：ほぼフラット、3D効果は最小限

フリップの方向

上下のフリップにはrotateYをrotateXに置き換え、斜めのフリップエフェクトには両軸を組み合わせます。