2018年11月6日(火)

【CSS】transformの使い方を解説！要素の変形や回転も自由自在

• 0
• 84
• 14
• 93

「transformは何ができるの?」
「transformはどんな時に使うの?」

そもそも、「transform」自体に馴染みがないという人が多いのではないでしょうか？ですが、この効果はWebデザインに携われば必ず目にします。例えば、デザインが回転したり、画像が拡大したり、などの効果がtransformを使った効果です。

「CSSアニメーションは上級者向けじゃないの?」と思われるかもしれませんね。確かに、「曲者」であることは間違いありません。

ただ、恐れる必要はありません。複雑なアニメーション効果をだそうとすると、それなりの学習コストを払う必要がありますが、単純なアニメーション効果であれば、作成は容易ですし、知っていればデザインの幅が広がります。また「transform」自体は、様々な値を備えていますが、実際に使うのはそのうちのどれかで、全てを使う必要はない場合もあります。そこで、一度試しに使ってみることを勧めます。そうすれば、これまで「できない」と思っていた一部のデザイン効果が実は短時間でできてしまうことに気づくでしょう。

この記事は、初心者向けの記事で、既にCSSアニメーションを仕事にしている人に向けての記事ではありません。高度な効果を追求したい人は別のサイトを参考にされると良いでしょう。

【こ...