Chapter 03無料公開

記述の仕方について

7968
7968
2021.07.18に更新
このチャプターの目次

transform はプロパティですので、複数記述すると最後の transform プロパティのみ反映されます。
例えば、移動と回転を指定するときは、transform プロパティを複数記述せずに、値に続けて記述してください。
値に複数記述するときは、半角スペースを空けて続けて記述してください。

正しい記述

正しい記述
セレクタ名 {
    transform:translateX(20px) translateY(20px) rotate(40deg);
}

誤った記述

誤った記述
セレクタ名 {
    transform:translateX(20px);
    transform:translateY(20px);
    transform:rotate(40deg);
}

同じプロパティを複数記述したときは、最後に記載した rotate(40deg) が反映されます。

値に記述する順番も重要で、記述順に変形します。

例えば、値に「移動・回転・伸縮・傾斜」の順番に指定したときと、逆に「傾斜・伸縮・回転・移動」の順番で指定したときは実行結果が異なる場合があります。
意図した結果にならないときは、順番も確認してください。