Perspective プロパティ

最終更新：2026-09-13

perspective Perspective プロパティ

perspective プロパティは、3D 変換における透視の強さ、すなわち観察者の目から z=0 平面までの距離を定義します。値が小さいほど効果が強く（近大遠小がより誇張され）、値が大きいほど透視が平坦になります。このプロパティは 3D 変換を適用する要素の親に設定する必要があり、リアルな 3D シーンの基礎となります。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

perspective: none | <length>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	透視なし
`<length>`	タイプ	透視の距離

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
perspective	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
すべての主要ブラウザーでサポート

ヒント： perspective は親要素に設定する必要があり、3D 変換を適用するすべての子要素に影響します。500px から 1500px の間の値が通常は自然に見えます。

重要： none は透視なし（無限遠と同等）を意味し、3D 変換は奥行きのない正投影（orthographic projection）として描画されます。

❓ よくある質問

Qperspective と perspective-origin プロパティはどのように関係していますか？

Aperspective は観察者から z=0 平面までの距離、つまり透視の強さ（近大遠小の誇張度）を定義します。perspective-origin は観察者の視線がコンテナのどこに落ちるか、つまりシーンがどの角度から見えるかを決定します。どちらも 3D 表示に必要なパラメータであり、同じ親コンテナに設定され、子要素の 3D 変換がどう見えるかを共に決定します。

Q要素に rotateY を設定したのに奥行き感がないのはなぜですか？

A通常は親要素に perspective が欠けているため、回転が平坦に描画されます。あるいは親要素に overflow: hidden、opacity が 1 未満、または filter があり、それぞれが平坦なコンテキストを強制して 3D を押しつぶしています。代わりに、transform: perspective(800px) rotateY(45deg) として要素自身に透視を適用することもできます。

Q3D の CSS 変換に適した perspective の値はどのくらいですか？

A値は観察者から要素までの距離です。値が小さいほど透視が強く、歪みがより誇張され、値が大きいほど正投影に近づきます。一般的なページ効果では 500px〜1500px が自然に見え、800px〜1000px が一般的な選択です。200px〜400px は誇張された魚眼（fisheye）効果になります。回転中に端が動きすぎないよう、要素のサイズに比例して調整してください。

Qperspective プロパティと transform: perspective() 関数の違いは何ですか？

Aperspective プロパティは親に設定され、すべての 3D 子要素に同じ単一の視点を与えるため、複数の子要素が 1 つの透視を共有します。perspective() 関数は特定の要素自身の transform に書かれ、その要素にのみ適用され、効果は関数リスト内の位置に依存します。親レベルの透視は実際のシーンにより近く、関数形式は個別の要素に独自の透視を与えるのに適しています。