{ transform 【 トランスフォーム 】 : トランスフォーム関数; }

transformプロパティは、トランスフォーム関数を指定して対象要素を変形させます。平面空間での変形では、右方向を正とするx軸、下方向を正とするy軸を定義した2方向での変形となります。変形は要素の中心を軸に実行されます。

初期値	none
継承	なし
適用される要素	変形可能な要素
モジュール	CSS Transforms Module Level 1

値の指定方法

noneを除き関数型の値となり、半角スペースで区切って複数指定できます。また、各値を指定する順序によって表示される結果が異なります。

トランスフォーム関数

none	要素を変形しません。
matrix()	行列式によって要素を変形します。6個の任意の数値をカンマ（,）で区切って指定します。各値は順に、x軸方向の拡大・縮小率、y軸方向の傾斜率、x軸方向の傾斜率、y軸方向の拡大・縮小率、x座標の移動距離、y座標の移動距離に対応しています。
transrate()	要素のxy座標を移動します。移動距離を単位付きの数値で指定します。 x座標、y座標はカンマ（,）で区切って指定します。translate(15px, 20px)と指定 すると、右へ15px、下へ20px 移動します。
translateX()	要素のx座標を移動します。移動距離を単位付きの数値で指定します。
translateY()	要素のy座標を移動します。移動距離を単位付きの数値で指定します。
scale()	要素をx軸、y軸方向に拡大・縮小します。値はカンマ（,）で区切って指定します。scale(2,0.5)と指定すると、x軸方向に2 倍拡大、y軸方向に1/2 縮小されます。
scaleX()	要素をx軸方向に拡大・縮小します。任意の実数で倍率を指定します。負の値を指定すると、要素は裏返ります。
scaleY()	要素をy軸方向に拡大・縮小します。任意の実数で倍率を指定します。負の値を指定すると、要素は裏返ります。
rotate()	要素を回転します。回転角度を単位付きの数値で指定します。rotate(50deg)と指定すると、要素は時計回りに50度回転します。
skew()	要素の形状をx軸、y軸方向に傾斜させます。値はカンマ（,）で区切って指定します。
skewX()	要素の形状をx軸方向に傾斜させます。傾斜角を単位付きの数値で指定します。
skewY()	要素の形状をy軸方向に傾斜させます。傾斜角を単位付きの数値で指定します。

サンプルコード

以下の例では、画像をtranslate()関数で移動したあとに、rotate()関数で15度回転しています。

.box img{
  transform: translate(50px, 50px) rotate(15deg);
}

以下の例では、画像をtranslate() 関数で移動したあとに、scale() 関数でx軸方向に1.4倍、y軸方向に0.5倍、拡大しています。

.box img{
  transform: translate(50px, 50px) scale(1.4,0.5);
}

以下の例では、画像をtranslate() 関数で移動したあとに、skew() 関数でx軸方向に20度、y軸方向に5度傾斜させています。

.box img{
  transform: translate(50px, 50px) skew(20deg,5deg);
}