こんにちは。01wave冨永です。
前回の「transition編」に続き、今回は要素を移動させたり、回転させたりなど変形のプロパティである「transform編」について書いています。
▼「transition編」についてはこちらをご覧ください。
こんにちは。01wave冨永です。 突然ですが、ボタンなどの要素に動きをつける時のコーディングってどうされてい…
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
ショートハンドプロパティ
全てまとめて表示することもできます。
「プロパティ（値）」を半角スペースでつないで記述します。
まとめ
「transform」と「transition」を使い実際にコーディングしてみました！
組み合わせて使うことにより、さらに動きの幅を広げることができました。
オンマウス（スマホの方はタップ）していただけるとさまざまな動きを楽しめます。
See the Pen JeawMm by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0
小さな動きの組み合わせで複雑な動きを表現できるため、基本を押さえておくことが大事だなと改めて感じました。
今後、ボタンやリンクなど用途に合わせてアニメーションを使い、自由自在に動きを表現できるように実践していきたいです。
次回は、「animation @keyframes」について書きます。お楽しみに♪
“CSSアニメーション 〜transform編〜” への1件のフィードバック