3D 立体カードスタック付きヒーロー
3D 立体カードスタック付きヒーローは、右側に複数のカードが奥行きを持って重なる Stripe / Linear 風の構成です。親要素 .hero-3d__stack に perspective:1200px を与え、各カード（ .hero-3d__card ）を position:absolute で重ねたうえで…
解説
3D 立体カードスタック付きヒーローは、右側に複数のカードが奥行きを持って重なる Stripe / Linear 風の構成です。親要素 .hero-3d__stack に perspective:1200px を与え、各カード（.hero-3d__card）を position:absolute で重ねたうえで rotateY と rotateX を当てて立体的に傾けています。z-index と top / left のずらしで前後関係と段差を作り、グラデーションのカードが浮いて見える設計です。JavaScript なしの純 CSS 3D 変形です。
使いどころ
- ダッシュボードや管理画面を訴求する SaaS の LP
- プロダクトの画面イメージを立体的に見せたいとき
- テック感・先進感を演出したいコーポレートトップ
傾きの強さは各カードの rotateY / rotateX の角度で、奥行き感は親の perspective の値で調整できます。値を小さくするとパースが強く誇張されます。カードの中身は background のグラデーションを実際の画面キャプチャに差し替えると説得力が増します。モバイルでは 2 カラムが窮屈になるため、縦積みへ切り替えるメディアクエリを足すと読みやすくなります。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
カードの立体感（傾き）を強めるには？
各カードの rotateY と rotateX の角度を大きくします。あわせて親要素の perspective を小さくするとパースが強調され、より奥行きのある見た目になります。
カードに実際の画面画像を入れられますか？
入れられます。.hero-3d__card のグラデーション背景を、画面キャプチャを指定した background-image に置き換えるか、カード内に img を配置します。