#はじめに
この記事は、HTMLとCSSの基礎知識がある方向けの内容です。
CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。
transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。
ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。
jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。
transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。
解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。
検証する場合は、一読して全てのプロパティを確認してから試してみてください。
説明内でベンダープレフィックスの記述はしておりません。
検証して動作しないときは、ベンダープレフィックスの要否を確認してください。
#transformプロパティについて
transform（トランスフォーム）は、直訳すると変形という意味です。
変形には移動、回転、伸縮、傾斜の4つがあります。
transformプロパティの値に関数を指定することで、移動、回転、伸縮、傾斜の設定ができます。
移動、回転、伸縮は、3D（XYZ方向）による指定ができます。
transformプロパティの値に指定できる関数は下記になります。
####transformプロパティの値に指定できる関数
| No | 関数 | 読み方 | 変形効果 | 2D（XY方向） | 3D（XYZ方向） |
|---|---|---|---|---|---|
| 01 | translate | トランスレイト | 移動 | ○ | ○ |
| 02 | rotate | ローテート | 回転 | ○ | ○ |
| 03 | scale | スケール | 伸縮 | ○ | ○ |
| 04 | skew | スキュー | 傾斜 | ○ | － |
上述している通り、transformプロパティの値に関数を指定することで、変形の設定ができます。
移動や回転など複数指定するときは、記述の仕方に注意する必要があります。
最初にtransformの記述の仕方について確認した後に各関数について見ていきましょう。
##記述の仕方について
transformはプロパティですので、複数記述すると最後のtransformプロパティのみ反映されます。
例えば、移動と回転を指定するときは、transformプロパティを複数記述せずに、値に続けて記述してください。
値に複数記述するときは、半角スペースを空けて続けて記述してください。
####正しい記述
セレクタ名 {
transform:translateX(20px) translateY(20px) rotate(40deg);
}
####誤った記述
セレクタ名 {
transform:translateX(20px);
transform:translateY(20px);
transform:rotate(40deg);
}
同じプロパティを複数記述したときは、上書きされるため、最後に記載した rotate(40deg) のみ反映されます。
また、値に記述する順番も重要で、記述順に変形します。
例えば、値に「移動・回転・伸縮・傾斜」の順番に指定したときと、逆に「傾斜・伸縮・回転・移動」の順番で指定したときは実行結果が異なる場合があります。
意図した結果にならないときは、順番も確認してください。
続きは Zenn で閲覧できます。
今まで無料で公開しておりましたが、記事を有料化しました。
2021 年 7 月 19 日 300 円
※ 調べて記事にまとめるのに 100 時間前後を費やしています。
※ 知識を得ること以外に時間短縮にもなるので、300 円以上の価値はあると思います。
※ 最初に購入した方々が損をしないように、値上げすることはあっても、値下げはしません。
他の CSS 関連の記事も Zenn で購入できます。
下記の記事も調べて記事にまとめるのに 100 時間前後を費やしているので、300 円以上の価値はあると思います。
ご興味のある方は、是非ご覧ください。
2021 年 7 月 19 日 各 300 円