お久しぶりです。
GOSHIMMERです。
今回は、要素を自由自在に動かせる、cssプロパティ「transform」についてご紹介します!
この記事はこんな人におすすめ
Webサイトに何か動きを加えたいな・・・
要素を動かしたり、回転させたりしてみたい!
transformについて詳しく知りたい
transformって何?
transformとは、CSS3で追加された新しいプロパティです。要素を回転、拡大・縮小、傾斜、移動させることができます。
以前紹介した、「transition」と似ているように感じますが、「transition」は時間に関する変化を制御できるプロパティなので、今回学ぶ「transform」と組み合わせることでより高度な仕上がりになります。
今回は、transformの中でも、要素の移動、変形を表現する4つの関数をご紹介します。
translate | 移動効果。X軸、Y軸、Z軸での移動を設定することができます。 |
---|---|
rotate | 回転効果。translateと同様に、X軸、Y軸、Z軸の回転を設定できます。 |
scale | 伸縮効果。X軸、Y軸、Z軸の拡大、縮小を設定できます。 |
skew | 歪み効果。X軸、Y軸の歪みを設定できます。 |
これから一つ一つ解説していきます。
transformの使い方
移動効果 translate
translateはX軸、Y軸、Z軸への移動を指定することができます。
translate( X軸 , Y軸 ) | X方向、Y方向の移動距離をカンマで区切って指定します。 |
---|---|
translateX( X軸 ) | X軸(横方向)の移動距離を指定できます。 |
translateY( Y軸 ) | Y軸(縦方向)の移動距離を指定できます。 |
translateZ( Z軸 ) | translateZは単体では何の動きも実現してくれません。例えば、遠近感を出すperspective()と使うことで奥行きのある移動をかなえることができます。 |
translate3d( X軸 , Y軸 , Z軸 ) | 3dの動きを実現してくれます。X軸、Y軸、Z軸の値を設定します。 |
例)横に10px、縦に20%移動させたい
copyするtransform:translate(10px,20%);
copyするtransform:translateX(10px);
transform:translateY(20%);
このように数値で指定することができます。
回転効果 rotate
rotateはX軸、Y軸、Z軸への回転を指定することができます。
また、単位は「deg」「rad(角度・弧度法のラジアン)」「turn(回転)」がありますが、「deg」を用いることが多く、「deg」とは「degree」で「度」を意味します。
rotate( 回転角度 ) | この形で宣言すると、要素の中心を基準に回転角度を指定します。簡単にいうと、rotateZと同じ動きをします。 |
---|---|
rotateX( X軸 ) | X軸(横方向)の回転角度を指定できます。X軸を基準として、垂直方向へ回転させたいときに指定します。 |
rotateY( Y軸 ) | Y軸(縦方向)の回転角度を指定できます。Y軸を基準として、水平方向へ回転させたいときに指定します。 |
rotateZ( Z軸 ) | Z軸は要素の中心を基準とした回転になりますので、rotate()と同じ動きをします。3Dの動きを理解するためにはZの回転を理解することが重要になってきます。 |
rotate3d( X軸 , Y軸 , Z軸 , 回転角度 ) | 3Dの立体的な回転を実現してくれます。X軸、Y軸、Z軸の値を一気に設定します。 |
例)z方向へ20度回転させたい。
copyするtransform:rotate(20deg);
transform:rotateZ(20deg);
例)3dへ180度回転させたい。
copyするtransform:rotate3d(1,1,1,180deg);
rotate3d();に関しては、X,Y,Z軸への変化の度合いを指定する必要があり、これに関してはここでは詳しく説明しません。
便利なジェネレーターを利用するか、その他解説しているブログ等をご参照ください。
伸縮効果 scale
scaleはX軸、Y軸、Z軸への伸縮を指定することができます。
また、単位は使用せずに、「1.5」と書けば、「1.5倍」に、「0.5」と書けば、「0.5倍」になります。
scale( X軸 , Y軸 ) | X軸、Y軸の値を指定できます。2Dで縦と横に拡大縮小されます。 |
---|---|
scaleX( X軸 ) | X軸(横方向)の伸縮度合を指定できます。 |
scaleY( Y軸 ) | Y軸(縦方向)の伸縮度合を指定できます。 |
scaleZ( Z軸 ) | scaleZは単体では何の動きも実現してくれません。例えば、遠近感を出すperspective()と使うことで奥行きのある伸縮をかなえることができます。 |
scale3d( X軸 , Y軸 , Z軸 ) | 3Dの立体的な伸縮を実現してくれます。X軸、Y軸、Z軸の値を一気に設定します。こちらも3D効果を実現する値と一緒に指定する必要があります。 |
例)X軸方向へ1.5倍、Y軸方向へ0.5倍伸縮させたい。
copyするtransform:scale(1.5,0.5);
copyするtransform:scaleX(1.5);
transform:scaleY(0.5);
例)X軸方向へ、1.5倍、Y軸方向へ0.5倍、Z軸(奥行)へ10倍(3D)伸縮させたい。
copyするtransform: perspective(400px) scale3d(1.5,0.5,10);
歪み効果 skew
skewはX軸、Y軸への歪み(傾斜)を指定することができます。
また、こちらも単位は角度を示す「deg」を使用します。
skew( X軸 , Y軸 ) | X軸、Y軸に対する歪みをまとめて指定することができます。 |
---|---|
skewX( X軸 ) | X軸(横方向)の歪みを指定できます。高さを固定したまま、横にスライドさせるイメージです。 |
skewY( Y軸 ) | Y軸(縦方向)の歪みを指定できます。横幅を固定したまま、縦にスライドさせるイメージです。 |
例)Y軸方向へ20度歪みをつけたい。
copyするtransform:skew(0,20deg);
copyするtransform:skewY(20deg);
まとめ
いかがだったでしょうか。
cssを勉強しているとよく見かける、transform。似た単語が多くごっちゃになりがちですが、正しく理解するだけで、かなり使いやすいプロパティの一つです。
transitionと合わせながらぜひ使ってみてくださいね!
また別の記事でtransformの関数の一つ、「matrix」に関して詳しく説明します。

GOSHIMMER