CSSアニメーション 〜transform編〜

こんにちは。01wave冨永です。

前回の「transition編」に続き、今回は要素を移動させたり、回転させたりなど変形のプロパティである「transform編」について書いています。

 transformについて

transformとは直訳すると「変形」と言う意味です。
CSS3から追加され、要素に対して変形を加えることができるプロパティになります。
変形には「移動」「回転」「伸縮」「傾斜」があり、順番に説明していきます。

※transformには2D（XY方向）と3D（XYZ方向）の指定ができますが、今回は2Dのみについて解説していきます。

移動　transform:translate(0px);

要素の移動を指定するプロパティです。
「 transform:translate(数値); 」と記述し、値は「px」や「％」で指定します。

移動する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

See the Pen gQdQjZ by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

回転　transform:rotate(0deg);

要素の回転を指定するプロパティです。
「transform:rotate(数値);」と記述し、値は角度を表す「deg」で指定します。（90deg=90度）

正数は時計回り、負数は反時計回りに回転します。
また、X軸方向、Y軸方向への回転もあります。
実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

See the Pen aQaQRy by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

伸縮　transform:scale(0);

要素の伸縮を指定するプロパティです。
「transform:scale(数値);」と記述し、値は「数値のみ」で指定します。
1を基準に伸縮する比率を指定できます。

伸縮する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

See the Pen QJVJJw by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

傾斜　transform: skew(0deg);

要素の傾斜を指定するプロパティです。
「transform: skew(数値);」と記述し、値は角度を表す「deg」で指定します。（90deg=90度）

傾斜する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

See the Pen XyPyyM by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

ショートハンドプロパティ

全てまとめて表示することもできます。
「プロパティ（値）」を半角スペースでつないで記述します。

 まとめ

オンマウス（スマホの方はタップ）していただけるとさまざまな動きを楽しめます。

See the Pen JeawMm by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

小さな動きの組み合わせで複雑な動きを表現できるため、基本を押さえておくことが大事だなと改めて感じました。
今後、ボタンやリンクなど用途に合わせてアニメーションを使い、自由自在に動きを表現できるように実践していきたいです。

次回は、「animation @keyframes」について書きます。お楽しみに♪