どうも7noteです。transformを複数書く時は書き順に注意！！！
要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。
まずtransformで使える指定の種類は以下の通り。
| 書き方 | 指定方法例 | |
|---|---|---|
| 移動 | translate | transform: translate(100px, 100px); |
| 回転 | rotate | transform: rotate(-45deg); |
| 伸縮 | scale | transform: scale(2, 2); |
| 傾斜 | skew | transform: skew(30deg, 30deg); |
○ 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度回転しているので、右下に移動後、左下に移動することで、結果下方向に移動したことになっている。）
まとめ
・複数指定す際は半角スペースを空けて繋げる。
・また指定する順番には注意！左から順番に処理される。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
