Chapter 01無料公開

はじめに

7968
7968
2021.07.18に更新

この記事は、HTML と CSS の基礎知識がある方向けの内容です。
CSS3 から要素の変形が指定できる、transform(トランスフォーム)プロパティが追加されました。
transform プロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。
ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。
jQuery や JavaScript を使って似たようなことができますが、CSS を使う方がヌルヌル動きます。

transform(変形)には、2D( XY 方向)と 3D( XYZ 方向)があり、3D 表示するには複数のプロパティを指定する必要があります。
解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。
検証する場合は、一読して全てのプロパティを確認してから試してみてください。
説明内でベンダープレフィックスの記述はしておりません。
検証して動作しないときは、ベンダープレフィックスの要否を確認してください。

transform プロパティは、よく transition (トランジション)プロパティ や @keyframes と一緒に使うことがあります。
transition プロパティとは変化するまでの時間を設定するプロパティです。
この transition についてもまとめたので、詳しく知りたい方は下記をご覧ください。

https://zenn.dev/7968/books/aaf830b1b0cf4a

@keyframes と animation についてもまとめたので、詳しく知りたい方は下記をご覧ください。

https://zenn.dev/7968/books/14896406b4a8ac