CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 transform-style 属性 CSS3 transform 属性

CSS3 transform-origin属性の使用方法及び例

transform-Origin属性は変換要素の位置を変更することができます。

2D変換要素は要素のXおよびY軸を変更できます。 3D変換要素，それに加えて要素のZ軸を変更できます。　

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	50% 50% 0
适用于：	可变形元素
继承：	没有
可动画制作：	是。请参考动画属性。
版本：	CSS3的新功能
JavaScript语法：	object.style.transformOrigin="20@%"

transform-origin的使用语法

该属性的语法如下：

transform-origin:　x-position　|　y-position　|　z-position　|　initial　|　inherit

注意：如果仅为transform-origin属性指定了一个值，则假定第二个值为center，它等于50％の値。

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

例

img　{
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-origin:　25% bottom;
}

テストを試してみる‹/›

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

属性値

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

値	説明
x-position	変換原点の水平位置（またはオフセット）を示す。以下の値のいずれかを持つことができます： percentage -要素の幅に対するオフセットを定義します。 length -使用する長さ値のオフセットを定義します。 left -0％またはゼロ幅。 center -ボックスの幅の50％または半分。 right -等しい100％または整个ボックスの幅。
y-position	変換原点の垂直位置（またはオフセット）を示す。以下の値のいずれかを持つことができます： percentage -要素の高さに対するオフセットを定義します。 length -使用する長さ値のオフセットを定義します。 top -0％またはゼロ高さ。 center -ボックスの高さの50％または半分。 bottom -等しい100％または整个ボックスの高さ。
z-position	一つのlength値は、ユーザーの目からZ=0原点（3D変換）。パーセンテージは無効です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransformを使用します。-originの属性値。

ブラウザ互換性

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

	Firefox （2D）3.5 +、3D）10+ ^-moz-、16 + Chrome （2D）4 +、3D）12+ ^-webkit-、36 + Internet Explorer （2D）9 ^-ms-、10+ Apple Safari （2D）3.2 +、3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-、（2D）（3D）15+ 　 ^-webkit-、23+

さらに詳しくはこちらをご覧ください

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

CSS3 transform-style 属性 CSS3 transform 属性