備忘録的プログラミングリファレンス

transform プロパティ

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

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

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

効果呼び名関数
回転rotaterotate( angle )、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d( x, y, z, angle )
拡大／縮小scalescale( x ,y )、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)
傾斜skewskew(x-angle,y-angle)、skewX(angle)、skewY(angle)
移動translatetranslate(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)

CSS

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

DOM(JavaScript)

値の取得
String = object.style.transform;
値の設定
object.style.transform="none | <transform-functions> | initial | inherit";

値（Values）

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

備考（Remarks）

初期値（Default value）none
継承（Inherited）No
CSS AnimationYes

Example

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

rotate() 関数による回転例

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

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

３D（立体）表示

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

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