今回は移動、回転、拡大・縮小などに使えるtransformプロパティをご紹介します。

transformとは？

transformとは要素に動きをつけることができます。
移動や回転などの動き、また2D・3Dの変形も実装出来ます。

transformの使い方（移動：translate）

transform:translate(50px,50px);
transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);
transform:translate3d(50px,50px,50px);

transform:translate(X方向,Y方向);
transform:translateX(X方向);
transform:translateY(Y方向);
transform:translateZ(Z方向);
transform:translate3d(X方向,Y方向,Z方向);

transformの使い方（拡大・縮小：scale）

transform:scale(1.2,1.2);
transform:scaleX(1.2);
transform:scaleY(1.2);
transform:scaleZ(1.2);
transform:scale3d(1.2,1.2,1.2);

transform:scale(X方向,Y方向);
transform:scaleX(X方向);
transform:scaleY(Y方向);
transform:scaleZ(Z方向);
transform:scale3d(X方向,Y方向,Z方向);

transformの使い方（回転：rotate）

回転は時計回りの回転角度を指定します。

transform:rotate(45deg);
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(1,1,1,-180deg);

transform:rotate(回転角度);
transform:rotateX(X軸を軸とした回転角度);
transform:rotateY(Y軸を軸とした回転角度);
transform:rotateZ(Z軸を軸とした回転角度);
transform:rotate3d(x,y,z,回転角度);

transformの使い方（傾斜：skew）

transform:skew(-15deg,-15deg);
transform:skewX(-15deg);
transform:skewY(15deg);

transform:skew(傾斜角度);
transform:skewX(X軸を軸とした傾斜角度);
transform:skewY(Y軸を軸とした傾斜角度);

実装結果

いかがでしょうか。
画像の拡大・縮小、アクセントの装飾画像の回転、背景の傾斜などいろいろな用途で使えます。
是非、使ってみてください。

他にもあるよ。関連記事

• 【WordPress】the_archive_titleの不要な文字を削除
• 【CSS】placeholderの文字色を変更する方法
• 【CSS】CSSで矢印にも使えるいろいろな三角形をつくる