どうも7noteです。transformを複数書く時は書き順に注意！！！

要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。

まずtransformで使える指定の種類は以下の通り。

○ transformの正しい複数指定の方法

/* 正しいtransformの複数指定の方法 */
img {
  transform: translate(100px, 100px) rotate(-45deg);
}

transformを複数指定する場合は間を半角スペース空けます。
これが正しい複数指定の方法です。

× 間違った複数指定の方法

/* 間違った複数指定の方法 */
img {
  transform: translate(100px, 100px);
  transform: rotate(-45deg);
}
/* もしくは */
img {
  transform: translate(100px, 100px) , rotate(-45deg);
}

どちらも間違った書き方です。
もしこれを書いても前者の書き方ではtransformが上書きされrotate(-45deg)しか効きません。後者の場合はエラー扱いになり、cssが効きません

複数指定する場合は、順番に注意！！！

実際に見ていただきましょう。

/* パターン１ */
img {
  transform: translate(100px, 100px) rotate(45deg);
}

/* パターン２ */
img {
  transform: rotate(45deg) translate(100px, 100px);
}

どうでしょうか？
書き順によって、結果が変わってしまいます。

解説

これはcssの処理順が影響しているためです。
パターン１では先に100pxずつの移動をしてから要素を回転します。
逆にパターン２では先に回転した位置から100pxずつの移動をするので違う結果となります。

「パターン１の処理順」

translate(100px, 100px)からのrotate(45deg)。

「パターン２の処理順」

rotate(45deg)からのtranslate(100px, 100px)。

（画像が45度回転しているので、右下に移動後、左下に移動することで、結果下方向に移動したことになっている。）

まとめ

・複数指定す際は半角スペースを空けて繋げる。
・また指定する順番には注意！左から順番に処理される。

おそまつ！