CSS ・ アニメーション
perspective
3Dの奥行き（遠近感）
3D 変形する要素に、奥行き（遠近感）を付けます。指定するのは変形する要素ではなく、その親要素です。
01
サンプルコード
HTML
1<div class="row">
2 <div class="scene near">
3 <div class="card">300px</div>
4 </div>
5 <div class="scene far">
6 <div class="card">1500px</div>
7 </div>
8</div>
CSS
1.row {
2 display: flex;
3 gap: 40px;
4 padding: 20px 30px;
5}
6/* 親要素に perspective を書く */
7.near {
8 perspective: 300px;
9}
10.far {
11 perspective: 1500px;
12}
13.card {
14 width: 120px;
15 height: 90px;
16 display: grid;
17 place-items: center;
18 background: #b68235;
19 color: #fff;
20 font-size: 13px;
21 transform: rotateY(45deg);
22}
02
実行結果
ブラウザでの表示どちらも rotateY(45deg) で回していますが、数値が小さい左のほうが遠近感が強く見えます
03
解説
perspective は、現在の視点から要素までの距離を指定して、奥行き（遠近感） を表現するプロパティです。カメラと被写体の距離をイメージするとわかりやすいです。
数値が小さい → カメラが被写体に「近い」→ 遠近感が強くなる。数値が大きい → カメラが「遠い」→ 遠近感が弱く、平面的に見える。
指定するのは 変形する要素の親要素 です。translateZ や rotateX・rotateY は、親に perspective がないと立体的に見えません。
perspective-origin は、3D で表現されるときに どこから要素の動きを見ているか（視点の位置） を指定するプロパティです。初期値は中央（50% 50%）で、left top のように書くと左上からのぞき込んだ見え方になります。
04
応用例・注意点
設定値の目安
| 数値 | 説明 |
|---|---|
300px〜600px | ガッツリ3D（目立たせたい） |
800px〜1200px | ほどよい立体感（自然な演出） |
1500px〜3000px | さりげない奥行きを出す |
none | 遠近感なし（初期値） |
perspective-origin で視点の位置を変える
同じ perspective でも、視点を左上に動かすと見え方が変わります。perspective-origin も親要素に書きます。
HTML
1<div class="row">
2 <div class="scene">
3 <div class="card">中央から</div>
4 </div>
5 <div class="scene from-top">
6 <div class="card">左上から</div>
7 </div>
8</div>
CSS
1.row {
2 display: flex;
3 gap: 40px;
4 padding: 20px 30px;
5}
6.scene {
7 perspective: 400px;
8}
9.from-top {
10 perspective-origin: left top;
11}
12.card {
13 width: 120px;
14 height: 90px;
15 display: grid;
16 place-items: center;
17 background: #b68235;
18 color: #fff;
19 font-size: 13px;
20 transform: rotateX(40deg);
21}
ホバーでカードを奥に傾ける
perspective を付けた親の中で、子要素を rotateY と transition で動かします。
HTML
1<div class="scene">
2 <div class="card">マウスを乗せてください</div>
3</div>
CSS
1.scene {
2 perspective: 1000px;
3 padding: 10px 30px;
4}
5.card {
6 width: 180px;
7 padding: 30px 0;
8 text-align: center;
9 background: #b68235;
10 color: #fff;
11 font-size: 13px;
12 transition: transform .5s ease;
13}
14.card:hover {
15 transform: rotateY(30deg);
16}
注意点
- 01変形する要素自身に書いても効きません。親要素に書きます（要素自身に付けたいときは transform: perspective(800px) rotateY(45deg); のように関数で書く方法もあります）。
- 02数値を小さくしすぎると、要素がゆがんで見づらくなります。迷ったら 800px〜1200px から試します。