transform プロパティ

　transform プロパティは、エレメントの回転、拡大/縮小、傾斜、移動を指定するプロパティです。立体的な表現もできます。

　変形ができないエレメントもあります。ほとんどのボックスエレメントは変形できます。

　回転、拡大/縮小、傾斜、移動の指定には以下のような transform-functions を使います。

効果	呼び名	関数
回転	rotate	rotate( angle )、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d( x, y, z, angle )
拡大／縮小	scale	scale( x ,y )、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)
傾斜	skew	skew(x-angle,y-angle)、skewX(angle)、skewY(angle)
移動	translate	translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)

　エレメントの変形のための中心を調整するには transform-origin プロパティを使用します。デフォルトでは"50% 50% 0"でエレメントの中心になります。

エレメントを40°回転（Exampleを参照）

transform-origin: initial;
transform: rotate( 40deg );

　指定値は複数可能です。値の間は半角スペースで区切ります。

transform値の複数指定（Exampleを参照）

transform: rotate3d( 1,0,0,60deg ) rotate3d( 0,0,1,20deg );

　perspectiveプロパティやperspective-originプロパティで立体的な表現をしたエレメントの視点位置を指定することができます。

構文(Syntax)

transform: none | <transform-functions> | initial | inherit;

値の取得

String = object.style.transform;

値の設定

object.style.transform="none | <transform-functions> | initial | inherit";

Value	摘要
none	初期値（default値）
<transform-functions>	transform-functionsデータ型を参照のこと
initial	初期値に戻す
inherit	親エレメントのプロパティを継承

　transformの例です。rotate() 関数による回転、3D表示の例を示します。

　rotate() 関数による回転例です。

　回転の中心の調整には、transform-originプロパティを指定します。

　３D（立体）の例で、rotate3d()関数でX軸を中心に60度、Y軸を中心に20度、エレメントを傾けています。

　こちらは、回転の中心点を加えると複雑になるのでtransform-originプロパティを設定していません。