Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

perspective-origin リダイレクト 1

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

概要

CSSperspective-origin プロパティは、ユーザの見ている位置を決めます。これは perspective プロパティによって消失点として使われます。

  • 初期値 50% 50%
  • 適用対象 transform 可能要素
  • 継承 しない
  • 相対値の基準 bounding box のサイズ
  • メディア visual
  • 計算値 絶対値の length または none
  • アニメーションの可否

構文

形式文法: [ <percentage> | <length> | left | center | right | top | bottom] |
                [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
perspective-origin: x-position            /* one-value syntax */
perspective-origin: x-position y-position /* two-value syntax */

When both x-position and y-position are keywords, the following is also valid:
perspective-origin: y-position x-position

x-position
消失点の横座標上の位置を示します。次のいずれかの値です:
  • <割合> は要素の幅を基準にした位置を示します。負の数も使えます。
  • <length> は length 値を使って位置を示します。負の数も使えます。
  • left キーワードは length 値 0 を示すショートカットです。
  • center キーワードは パーセンテージ値 50% を示すショートカットです。
  • right キーワードは パーセンテージ値 100% を示すショートカットです。
y-position
消失点の縦座標上の位置を示します。次のいずれかの値です:
  • <割合> は要素の高さを基準にした位置を示します。負の数も使えます。
  • <length> は length 値を使って位置を示します。負の数も使えます。
  • top キーワードは length 値 0 を示すショートカットです。
  • center キーワードはパーセンテージ値 50% を示すショートカットです。
  • bottom, キーワードはパーセンテージ値 100% を示すキーワードです。

perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6

仕様

仕様書 策定状況 コメント
CSS Transforms Level 1
The definition of 'perspective-origin' in that specification.
草案  

ブラウザ実装状況

機能 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

関連情報

ドキュメントのタグと貢献者

 最終更新者: ethertank,