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

こんにちは、トミーです。

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

transformについて

transformとは直訳すると「変形」と言う意味です。
CSS3から追加され、要素に対して変形を加えることができるプロパティになります。

変形には「移動」「回転」「伸縮」「傾斜」があり、順番に説明していきます。
※transformには2D（XY方向）と3D（XYZ方向）の指定ができますが、今回は2Dのみについて解説していきます。

要素の移動を指定するプロパティです。「 transform:translate(数値); 」と記述し、値は「px」や「％」で指定します。
移動する方向としてはX軸方向、Y軸方向、XY軸方向があります。

実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

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

正数は時計回り、負数は反時計回りに回転します。
また、X軸方向、Y軸方向への回転もあります。

実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

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

1を基準に伸縮する比率を指定できます。
伸縮する方向としてはX軸方向、Y軸方向、XY軸方向があります。

実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

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

実際にオンマウス（スマホの方はタップ）で動きの違いを見比べてみてください。

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

transform: translate(50px) rotate(180deg) scale(2) skew(20deg);

「transform」と「transition」を使い実際にコーディングしてみました！
組み合わせて使うことにより、さらに動きの幅を広げることができました。

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

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