transformでrotateやtranslateを複数の値を指定する時に、正しい書き方をしなかったために挙動がおかしくなってしまった経験のある人はたくさんいるかと思い、ここのその正しい書き方を掲載しておきます。
transformで複数の値を指定する時の正しい書き方
結論としては以下のような書き方をすれば大丈夫です。
/* 正しいtransformの複数指定の方法 */
transform:translateY(-50%) rotate(45deg);ポイントとしては半角スペースを空けて値を指定することです。
間違っても
transform:translateY(-50%), rotate(45deg);のようにコンマ（,）を入れたり
transform: translateY(-50%);
transform: rotate(45deg);のように別々でそれぞれの値を指定しないようにしましょう。もし別々に指定すると、後に記述した方しか適用されませんのでご注意ください。
コメント