CSS3のtransformプロパティで要素を変化させる(2D)：初歩の初歩

HTML・CSS

前回はCSSアニメーションの「animation」と「transition」についてまとめましたが、今回は、要素を変形させる「transform」について。
前回記事→CSS3でアニメーション：初歩の初歩

transformプロパティ

■rorate

要素の回転

rotate()：X軸・Y軸の両方を指定できる。回転する角度を、0°～360°で指定。マイナスの値も指定できる。
rotateX()：X軸を中心に回転
rotateY()：Y軸を中心に回転

■scale

要素の拡大・縮小

scale()：X軸・Y軸の両方を指定できる。拡大・縮小する数値を指定。マイナスの値も指定できる。
scaleX()：X軸の拡大・縮小
scaleY()：Y軸の拡大・縮小

■skew

要素を傾斜変形させる

skew()：X軸・Y軸の両方を指定できる。傾斜する角度を、0°～360°で指定。マイナスの値も指定できる。
skewX()：X軸の傾斜変形
skewY()：Y軸の傾斜変形

■translate

要素の移動

translate()：X軸・Y軸の両方を指定できる。移動する距離をpxで指定。マイナスの値も指定できる。
translateX()：X軸の移動
translateY()：Y軸の移動

仕様の詳細は、以下でご確認ください。
transform - CSS | MDN

注意点

ひとつの要素に対して複数のプロパティを記述する場合、各プロパティの記述順によって、表示が異なる場合もあります。
以下は、どちらも「要素をX軸方向に50px・Y軸方向に-40px移動、1.2倍に拡大、X軸方向に-45°傾斜」しようとしたときの表示ですが、要素が表示される位置がちょっと違います。

See the Pen example02/03 by Hiromi Tochio (@tam-tochio) on CodePen.

これは、example01は「移動→拡大→傾斜」、example02は「傾斜→拡大→移動」の順に処理されるためです。
example01は、「X軸方向に50px・Y軸方向に-40px移動」したあとで「1.2倍に拡大」され、「X軸方向に-45°傾斜」、example02は、「X軸方向に-45°傾斜」した要素が「1.2倍に拡大」され、移動距離もこの1.2倍の拡大が適用されて、「要素をX軸方向に60px（50px×1.2）・Y軸方向に-48px（-40px×1.2）移動」することになります。
想定どおりの表示にならないときは、プロパティの記述順を見直してみるといいでしょう。
上述のとおり、「skew（拡大）」は、「translate（移動）」の移動距離に影響するので、「translate（移動）」の前に記述しないようにすると安全かもしれません。

transform-originプロパティ

transformで適用される変形の基準点は、初期値では要素の中心（50%, 50%）となっていますが、transform-originを指定することで、任意の位置に基準点を設定できます。
以下は、どちらも「時計回りに45°回転」させていますが、ひとつはtransform-originがデフォルト（50%, 50%）、ひとつは「top left」を設定しています。

See the Pen example03/04 by Hiromi Tochio (@tam-tochio) on CodePen.

仕様の詳細は、以下でご確認ください。
transform-origin - CSS | MDN