CSS perspective-origin 属性

定義と使用法

perspective-origin属性は、3D要素が基づくX軸とY軸を定義します。この属性は、3D要素の底部位置を変更することができます。

perspective-origin属性が要素に定義された場合、その子要素が透视効果を受け取りますが、要素自体は受け取ません。

注記：この属性は、以下の属性と一緒に使用する必要があります： perspective 属性が一緒に使用され、3D変換要素にのみ影響を与えます。

も参照してください：

CSS3チュートリアル：CSS3 3D 转换

HTML DOMリファレンスマニュアル：perspectiveOrigin属性

例

3D要素の基点位置を設定します：

div
{
perspective:150;
perspective-origin: 10% 10%;
}

実際に試してみる

CSS 语法

perspective-origin: x-axis y-axis;

属性値

値 説明
x-axis

このビューが x 軸上での位置を定義します。デフォルト値：50%。

可能な値：

  • left
  • center
  • right
  • length
  • %
y-axis

このビューが y 軸上での位置を定義します。デフォルト値：50%。

可能な値：

  • top
  • center
  • bottom
  • length
  • %

技術的詳細

デフォルト値： 50% 50%
継承性： no
バージョン： CSS3
JavaScript 语法： object.style.perspectiveOrigin="10% 10%"

ブラウザのサポート

このテーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-