transformプロパティを使うことで要素を変形させることができます。
Webサイトに動きをつけるときに使用することが多いため、Web制作には必須の知識です。
書き方さえ分かれば簡単に扱うことができますので、この記事を読んで身に着けていきましょう。
- transformプロパティとは何か
- transformプロパティの種類
- transformプロパティの書き方
transformプロパティとは
transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティです。
このプロパティを使用することで3次元的な動きが可能になります。
transformプロパティの値に指定できる関数
transformプロパティには下記の関数が用意されています。
この関数を使用することで様々な効果を与えることができます。
| 関数名 | 読み方 | 実行効果 |
| translate | トランスレイト | 移動 |
| rotate | ローテート | 回転 |
| scale | スケール | 伸縮 |
| skew | スキュー | 傾斜 |
translateの使い方
translateを使用することで要素の移動が可能になります。
translateX()を使用した例
今回はわかりやすく、ホバーした際の動きに使用しています。
See the Pen transform translateX by ZeroPlus (@zeroplus-programming) on CodePen.
translateX()を使用することでX軸（横軸）の移動が可能になります。
要素1には、transform: translateX(40px);を使用してプラス方向（右側）に移動します。
要素2には、transform: translateX(-40px);を使用してマイナス方向（左側）に移動します。
translateY()を使用した例
See the Pen tranform tranlateY by ZeroPlus (@zeroplus-programming) on CodePen.
translateY()を使用することでY軸（縦軸）の移動が可能になります。
要素1には、transform: translateY(40px);を使用してプラス方向（下側）に移動します。
要素2には、transform: translateY(-40px);を使用してマイナス方向（上側）に移動します。
最初の位置を基準として、プラスが下方向、マイナスが上方向という点に注意しましょう。
translateZ()を使用した例
See the Pen transform translateZ by ZeroPlus (@zeroplus-programming) on CodePen.
translateZ()を使用することでZ軸（奥行き）の移動が可能になります。
translateX()やtranslateY()と比較してそれほど出番がないので、今回は動きの紹介程度にとどめますが、詳細な書き方は公式のMDNなどを見て確認してみてください。
translateZ() - CSS: カスケーディングスタイルシート | MDN
rotateの使い方
rotateを使用することで、要素の回転が可能になります。
See the Pen transform rotate by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: rotateX(360deg);を使用してX軸（横方向）に回転します。
要素2には、transform: rotateY(360deg);を使用してY軸（縦方向）に回転します。
値に使用しているdegは「デグ」と読み、degree（度数）の略になります。
例えば、360degは360度となります。
この単位は忘れずにつけるようにしましょう。
scaleの使い方
scaleを使用することで、要素の伸縮率を変更することができます。
See the Pen transform scale by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: scale(1.5);を使用して1.5倍拡大しています。
要素2には、transform: scale(0.75);を使用して0.75倍縮小しています。
要素3には、transform: scale(1.5, 0.75);を使用して、横軸と縦軸の倍率を変更しています。
skewの使い方
skewを使用することで、要素の傾斜が可能になります。
See the Pen transform skew by ZeroPlus (@zeroplus-programming) on CodePen.
要素1には、transform: skewX(45deg);を使用して、横方向に傾斜をつけています。
要素2には、transform: skewY(45deg);を使用して、縦方向に傾斜をつけています。
要素3には、transform: skew(10deg,10deg);を使用して、縦横方向に傾斜をつけています。
transformのまとめ
transformプロパティは、要素に動きをつける際に使用するプロパティです。Webサイトでは様々なアニメーションを実装することが多くあるため、どのような動きをするのか覚えておきましょう。
- transformプロパティの書き方と値の指定の仕方
- X,Y, Z 軸方向に動かすことができる
- 要素の回転・拡大/縮小・傾斜をさせることができる
という点をまずは理解できていればOKです！
自分で色々作成してみても学習になるので今回紹介した要素の数値を変更したり、色々試してみましょう。
