transformプロパティ（変形）で出来ること・まとめ

移動・回転・拡大など、要素を変形させられるtransformプロパティ。
transitionやanimationプロパティと併用することで、アニメーション効果のあるサイトを簡単に作れるので便利なcssプロパティです。

transformでどういうことが出来るのか、全て簡単にまとめておきます。(マウスホバーでサンプルが動きます)

INDEX

translate　移動
rotate 回転
scale　拡大・縮小
1. scaleZの注意
skew　反り・ゆがみ
perspective

translate　移動

たて、横、前後(z方向)に要素を移動させます。z方向を利用した立体表現については「transformのZ軸」をどうぞ。

モバイルのドロワーメニューや、表示と同時にふわっと浮かび上がる演出などに使われます。width・heightなどを変化させても同様のことが出来ますが、translateの方がスムーズな動きとなります。

translateX()で横方向、translateY()で縦方向、 translateZ()は前後、 translate3d()はx,y,zを一括で指定します。
translateZだけ、分かりやすさの為に傾き入れています。

X(200px)

Y(100px)

Z( -100px)

#1{
	transform: translateX(200px);
}	
#2{
	transform: translateY(100px);
}	
#3{
	transform: translateZ(-100px);
}	
#4{
	transform: translate3d(200px, 100px, 0);
}

rotate 回転

X軸（水平方向）、Y軸（垂直方向）を中心に回転します。
X・Yの指定がない場合は時計回りに回転します。
回転軸の位置はtransform-originプロパティで指定できます。（初期値はcenter ）

回転の度合いはdeg (= degree = 角度)で指定します。

X(120deg)

Y(45deg)

(360deg)

#1{
	transform: rotateX(120deg);
}
#2{
	transform: rotateY(45deg);
}	
#3{
	transfom: rotate(360deg);
}

scale　拡大・縮小

X方向、Y方向、Z方向の拡大率を変化させます。3dで一括指定。
倍率を整数で指定します。（2で倍のサイズ。0．5で半分）。

scaleZだけ少し特殊な動きになるので後で解説をはさむとして、まずはサンプルです。

X(2.2)

Y(0.5)

Z(-5)

#1{
	transform: scaleX(2.2);
}	
#2{
	transform: scaleY(0.5);
}	
#3{
	transform: scaleZ(-5);
}	
#4{
	transform: scale3d(1.3, 0.4, 1.2);
}

scaleZの注意

注意：scaleZ自体、そんな頻繁に使うプロパティでもないので、不要ならば読み飛ばしてください。自分でも書きながらかなり混乱しました。

scaleX・scaleYは要素自身の拡大率が変化するのに対し、scaleZは要素自身ではなく、（結果的に）translateZで相互関係がある要素に働きます。

分かりにくい思うので先ほどのサンプルを解説しておきます。（サンプルは疑似要素ですが、普通の子要素でも同じです。）

１・疑似要素にはtranslateZ(100px)を与え、親要素の前面にしています。

２・マウスホバーで親要素にscaleZ(-5)が追加されると、親要素とZ軸の関係がある別要素のZ方向にマイナス5倍、今回の場合、疑似要素がtranslateZ( -500px) の位置に変化します。

以下、scaleZサンプルに関係しているコード(抜粋)

親の親{
 perspective: 2000px;
 perspective-origin: 60% 150%;
}

親{
 perspective: 500px;
 transform-style: preserve-3d;
}

子(疑似要素){
 transform: translateZ(100px);
}

親:hover{
 transform: scaleZ(-5);
}

拡大「率」なので、Z軸がゼロの場合(translateZを指定していない場合)にscaleZを指定しても無効となり、元々のZ位置がマイナスの場合はscaleZの値が大きいほどZ位置は奥に下がります。（-2×5 が-10 になる道理）。

skew　反り・ゆがみ

rotateと同じく( deg)を使って、指定の角度分反らせます。
Xが横方向への反り、Yは縦方向への反りです。

X(45deg)

Y(-20deg)

#1{
	transform: skewX(45deg);
}
#2{
	transform: skewY( -20deg);
}

perspective

立体表現の際に必須となるパース（視点からの奥行き）を指定します。
perspectiveプロパティとして独立して使うこともできますし、そちらの方が一般的だと思います。
詳細やデモについては「transformのZ軸」をご参照ください。

#{
transform: perspective(1000px);
}

または

#{
perspective: 1000px;	
}

のように指定

translate 移動