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"でエレメントの中心になります。
transform-origin: initial;
transform: rotate( 40deg );
指定値は複数可能です。値の間は半角スペースで区切ります。
transform: rotate3d( 1,0,0,60deg ) rotate3d( 0,0,1,20deg );
perspectiveプロパティやperspective-originプロパティで立体的な表現をしたエレメントの視点位置を指定することができます。
ページ内 Index
構文(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 Animation | Yes |
Example
transformの例です。rotate() 関数による回転、3D表示の例を示します。
rotate() 関数による回転例
rotate() 関数による回転例です。
回転の中心の調整には、transform-originプロパティを指定します。
3D(立体)表示
3D(立体)の例で、rotate3d()関数でX軸を中心に60度、Y軸を中心に20度、エレメントを傾けています。
こちらは、回転の中心点を加えると複雑になるのでtransform-originプロパティを設定していません。