CSSパースペクティブチルトエフェクト（ホバー時）

パースペクティブチルトエフェクト

パースペクティブチルトは要素にカーソルに追従する3Dパララックスのような感覚を与えます。マウストラッキングのJavaScriptなしでも、純粋なCSSホバー状態で魅力的なチルトを作成できます。

CSS

.tilt-container {
  perspective: 600px;
}

.tilt-card {
  transition: transform 0.3s ease;
}

.tilt-card:hover {
  transform: rotateX(10deg) rotateY(-10deg);
}

Perspectiveが深度を作る仕組み

親のperspectiveプロパティはビューアーとz=0平面の距離を定義します。3D回転の見え方に影響します：

Perspective	結果
200px	非常にドラマチック、極端な短縮法
600px	バランスの取れた自然な3D感
1200px	控えめ、ほとんど知覚できない深度

Perspective Origin

perspective-originはビューアーの視点を制御します：

.container {
  perspective: 600px;
  perspective-origin: top left;
}

これにより消失点が変わり、要素の一方の角が近く見え、反対側の角が後退して見えます。

シャドウとの組み合わせ

動的なシャドウを追加すると3Dの錯覚が強化されます：

.tilt-card:hover {
  transform: rotateX(10deg) rotateY(-10deg);
  box-shadow: 5px 10px 20px rgba(0,0,0,0.3);
}