CSS Transformによるカードファンスプレッドエフェクト

ファン状カードスタック

カードファンエフェクトは、共有の基準点から異なる角度で回転された複数の重なるカードを表示し、トランプの手のようなビジュアルを作成します。

CSS

.card-stack {
  position: relative;
  width: 200px;
  height: 280px;
}

.card-stack .card {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}

.card:nth-child(1) { transform: rotateZ(-15deg); }
.card:nth-child(2) { transform: rotateZ(-5deg); }
.card:nth-child(3) { transform: rotateZ(5deg); }
.card:nth-child(4) { transform: rotateZ(15deg); }

Transform Originが鍵

transform-origin: bottom centerを設定すると、すべてのカードが下端を軸に回転し、カードを手に持っているような自然なファン形状が作られます。他のoriginでは異なるファンスタイルになります：

• bottom left — カードが右に広がる
• center center — カードがその場で回転（ファン効果なし）
• top center — 反転ファン、カードが下部で広がる

ホバーインタラクション

ホバー時にファンをさらに広げることができます：

.card-stack:hover .card:nth-child(1) { transform: rotateZ(-25deg); }
.card-stack:hover .card:nth-child(4) { transform: rotateZ(25deg); }

深度のためにTranslateを追加

回転にわずかなtranslateオフセットを組み合わせると、階層感が強化されます：

.card:nth-child(1) {
  transform: rotateZ(-15deg) translateX(-10px);
}