CSS | transformで複数の値を指定する方法
CSSの「transform」プロパティで複数の値を同時に指定する方法を紹介しています。
transformで複数の値を指定する
transformで「transform」プロパティに複数の値を指定しようとして効かなくて失敗する理由の多くは、個別にしているケースだと考えられます。
例えば以下のように「transform」プロパティを指定しても後で指定したプロパティしか反映されません。
div {
transform: rotate(10deg);
transform: translateY(10px);
}複数の「transform」プロパティを同時に指定したい場合は以下のように並べて指定します。
カンマで区切る必要はありません。
div {
transform: rotate(10deg) translateY(10px);
}また、「transform」プロパティの値を複数指定する場合、指定順（実行順）によって表示結果が変わる事に注意が必要です。