CSS rotateXによる3Dテキストパースペクティブエフェクト

rotateXとPerspectiveによる3Dテキスト

テキストにrotateXとperspectiveを適用すると、テキストが遠くに後退していくようなドラマチックな3D消失点エフェクトが作成されます。

CSS

.perspective-text-container {
  perspective: 400px;
}

.perspective-text {
  transform: rotateX(30deg);
  transform-origin: bottom center;
}

エフェクトのバリエーション

上に後退 — 下端が近く、上が後退：

.recede-up {
  transform: rotateX(25deg);
  transform-origin: bottom center;
}

下に後退 — 上端が近く、下が後退：

.recede-down {
  transform: rotateX(-25deg);
  transform-origin: top center;
}

サイドパースペクティブ — テキストが横に傾く：

.side-tilt {
  transform: rotateY(15deg);
  transform-origin: left center;
}

テキストシャドウとの組み合わせ

パースペクティブ角度に追従するテキストシャドウが3Dの錯覚を強化します：

.perspective-text {
  transform: rotateX(30deg);
  text-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

可読性

見出しテキストの回転角度は控えめに（35度以下）してください。本文テキストでは非常に控えめな角度（10度以下）にするか、パースペクティブを完全に避けてください。このエフェクトは大きく太い見出しに最も効果的です。