transformで回転・拡大縮小しよう

このレッスンでは、CSSのtransformプロパティを使った回転・拡大縮小の方法を学び、レイアウトに影響を与えずに要素を変形できるようになることを目標にします。「CSS transform 使い方」で調べている方向けです。

transformプロパティを使うと、要素をrotate()(回転)・scale()(拡大縮小)・translate()(移動)といった見た目の変形ができます。レイアウトの流れ(他の要素の位置)には影響しないのが特徴です。

サンプルコードでは、.card:hoverにtransform: rotate(10deg) scale(1.1);を指定し、マウスを乗せると少し回転しながら拡大する演出を作っています。複数の変形は空白区切りで同時に指定できる点も確認してみましょう。

初心者がよくつまずくのが、transformによる変形が周囲の要素の配置に影響しない点です。要素そのものの見た目は変わりますが、他の要素はまるでそこに何もなかったかのように元の位置のままです。レイアウトを変えずに視覚的な演出だけを加えたいときに、この性質が役立ちます。

transitionと組み合わせれば、マウスを乗せたときになめらかに変形するボタンなども作れます。カードのホバー演出やアイコンのアニメーションなど、実務のUIデザインで頻繁に活用されるテクニックです。