CSS3 perspective-origin プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

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

div {
    -webkit-perspective: 150px; /* Chrome, Safari, Opera */
    -webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
    perspective: 150px;
    perspective-origin: 10% 10%;
}
Try it Yourself ❯

定義と用法

perspective-origin ロパティは、x 軸とy 軸方向の 3D 要素の基点を定義します。 このプロパティは、3D要素の底辺の位置の変更を可能にします。

要素の perspective-origin プロパティを定義する場合、要素自身に遠近法の視点が設定されるのではなく、子要素に対して設定されます。

注: このプロパティは、perspective と一緒に使用しなければなりません。 また、これは 3D 変形要素にのみ影響を与えます！

To better プロパティをより深く理解するために、 デモをご覧ください。

デフォルト値： 50% 50%
継承： 継承する
アニメーション可否： 可。animatable を参照 Try it
バージョン： CSS3
JavaScript 構文： object.style.perspectiveOrigin="10px 50%" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。

プロパティ
perspective-origin 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-

CSS 構文

perspective-origin: x-axis y-axis|initial|inherit;

プロパティの値

Property 値 説明
x-axis x 軸に配置されたビューの位置を定義します

指定可能な値：

  • left
  • center
  • right
  • length
  • %

Default value: 50%
y-axis y 軸に配置されたビューの位置を定義します

指定可能な値：

  • top
  • center
  • bottom
  • length
  • %

デフォルト値：50%
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照

関連ページ

CSS チュートリアル： CSS 3D Transforms

HTML DOM リファレンス： perspectiveOrigin プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯