CSS 参考マニュアル

CSS @ルール(RULES)

CSS 属性全書

CSS3 perspective-origin属性の使用方法と例

perspective-origin属性の定義 3D要素が基づくX軸とY軸。この属性は、以下を変更可能にします。 3D要素の底位置。定義時のperspective-Origin属性は、元素の子供であり、透視は要素自体ではなくです。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの使用文法について説明しています。

デフォルト値：	50P%
適用範囲：	変形可能要素
継承：	ありません
アニメーション可能：	は参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの文法：	object.style.perspectiveOrigin="20%"

Perspective-originの使用方法

この属性の文法は以下の通りです：

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

注意：perspectiveにのみ指定された場合-origin属性が値を指定した場合、次の値は中心と仮定され、以下のようになります。50％の値です。

以下の例は、perspectiveを使用する方法を示しています。-origin属性。

例

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

テストをしてみて‹/›

注意：少なくとも1つの値がキーワードでない場合、最初の値は透視視点の原点の水平位置（またはオフセット）を示し、2番目の値は透視視点の原点の垂直位置（またはオフセット）を示します。

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
x-axis	透視視点の原点の水平位置（またはオフセット）を示します。以下のいずれかの値を持つことができます： percentage -要素の幅に対するオフセットを定義します。 length -使用する長さ値のオフセットを定義します。 left -等于0％または零幅。 center -等于盒子幅の50％または半分。 right -等于100％または整个ボックスの幅。
y-axis	透視視点の原点の垂直位置（またはオフセット）を示します。以下のいずれかの値を持つことができます： percentage -要素の高さに対するオフセットを定義します。 length -使用する長さ値のオフセットを定義します。 top -等于0％または零高さ。 center -等于盒子高度的50％または半分。 bottom -等于100％または整个ボックスの高さ。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のperspectiveを使用します。-originの属性値。

ブラウザの互換性

perspective-origin属性のブラウザの互換性について、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 10+ ^-moz-、16 + Google Chrome 12+ ^-webkit-、36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-、23+

さらに詳しくは

以下のチュートリアルを参照してください：CSS3 3D変換。

CSS position 属性 CSS3 perspective 属性