perspective

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSSperspective プロパティは、3D 配置された要素に遠近感を与えるため、z=0 平面とユーザ間の距離を決めます。z>0 である 3D 要素はより大きく、z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

ユーザの背後にある 3D 要素、例えば z-軸座標が perspective CSS プロパティの値より大きい要素は描画されません。

消失点はデフォルトで要素の中心に置かれますが、この位置は perspective-origin プロパティで変更できます。

このプロパティに 0none 以外の値を設定すると、新たなスタック文脈を作ります。

  • 初期値 none
  • 適用対象 変形可能要素
  • 継承 継承しない
  • メディア visual
  • 計算値 絶対値の length 、 または none
  • アニメーションの可否 可。length の値として補完します。
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

形式文法: none | <length>
perspective: none
perspective: 20px     /* <length> values */
perspective: 3.5em

perspective: inherited

none
立体的な変換を一切適用しないことを示すキーワードです。
<length>
ユーザと z=0 平面間の距離を表す <length> です。立体的な変換を要素とその内容に適用するときに使います。0 や 負の値なら、立体的な変換は適用されません。

perspective:250px; perspective:350px; perspective:500px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

仕様

仕様書 策定状況 コメント
CSS Transforms Level 1 草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 12-webkit 10 (10)-moz
16 (16)
10 未サポート (有)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0-webkit 10.0 (10)-moz
16.0 (16)
? 未サポート (有)-webkit

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す