マテリアルデザインを設計する上で欠かせないCSS「transform」について解説

transformプロパティでは、以下の変形を実現できます。

• 移動
• 縮尺
• 回転
• 傾斜
• 遠近効果

transform自体は要素を変形させるだけの役割ですが、
transitionなどと組み合わせることで、マテリアルデザインで表現されているような、繋がりのあるアニメーションを実現することができたりします。

実際の変化を見ながら、transformの変形について見ていきましょう。

はにわまん

transformが操れるとサイトの表現の幅がグッと広がります！

初期値

初期値はnoneです。つまり何も変形させません。

transform: none;

移動

もともと配置される場所から「どれだけ移動させるか」を指定できます。

指定の仕方は以下の通り。

• translate(X方向の移動距離, Y方向の移動距離)
• translateX(X方向の移動距離)
• translateY(Y方向の移動距離)
• translateZ(Z方向の移動距離)
• translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)

実際の例を見てみましょう。(破線は元々表示されるはずだった場所)

transform: translate(20px, 20px);でx方向に20px、y方向に20px動かしています。

<div class="transform-translate"></div>

.transform-translate {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transform: translate(20px, 20px);
}

縮尺

縮尺では、要素の拡大と縮小を指定できます。

指定の仕方は以下の通り。

• scale(X方向の縮尺比率, Y方向の縮尺比率)
• scaleX(X方向の縮尺比率)
• scaleY(Y方向の縮尺比率)
• scaleZ(Z方向の縮尺比率)
• scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)

実際の例を見てみましょう。(破線は元々表示されるはずだった大きさ)

transform: scale(.5, .5);で、縦、横ともに0.5倍しています。

<div class="transform-scale"></div>

.transform-scale {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transform: scale(.5, .5);
}

回転

要素を回転させることができる値

指定の仕方は以下の通り。

• rotate(回転角度)
• rotate3d(数値, 数値, 数値, 回転角度)
• rotateX(X軸を軸とする回転角度)
• rotateY(Y軸を軸とする回転角度)
• rotateZ(Z軸を軸とする回転角度)

実際の例を見てみましょう。(破線は元々表示されるはずだった位置)

transform: rotate(45deg);のように、degという単位で指定します。「度」と置き換えると分かりやすいと思います。時計回りに回転します。

<div class="transform-rotate"></div>

.transform-rotate {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transform: rotate(45deg);
}

コインのようにくるくる回転させるアニメーションに使えたりします。

傾斜

並行四辺形を表現する際に使用するtransformの値です。

指定の仕方は以下の通り。

• skew(X軸の傾斜角度, Y軸の傾斜角度)
• skewX(X軸の傾斜角度)
• skewY(Y軸の傾斜角度)

実際の例を見てみましょう。(破線は元々表示されるはずだった位置)

transform: skew(20deg,20deg);で、X軸を時計回りに20度、Y軸を時計回りに20度、傾けた形のオブジェクトが出来上がります。

<div class="transform-skew"></div>

.transform-skew {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transform: skew(20deg,20deg);
}

遠近効果

基本的にはrotateと組み合わせて使うものになります。遠くのものは小さく見えて近くのものは大きく見えるという効果です。

<div class="transform-perspective"></div>

.transform-perspective {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transform: perspective(100px) rotateY(20deg);
}

rotateY(20deg)だけだと、遠近なく回転するだけになります。上のと見比べることでperspectiveの効果が分かるのではないでしょうか。
（20degだと回転してるかどうかも分かりづらいですが…）

おわり

transformの基本的な使い方について解説しました。

冒頭でも言いましたが、アニメーション系のCSS、例えばtransitionなどと組み合わせることで、その効果は何倍にも膨れ上がります。

ぜひとも両方マスターしてください！