【CSS】transformで要素を変形させる方法

CSS

2021.08.262020.04.23

こんにちは朱夏です。

今回は、CSSの「transform」を使って、要素を変形させる方法を解説してみました。

朱夏

要素を回転させたり変形させたりしてみたい。

「transform」は、画像などの要素を引き延ばしたり、斜めに配置したりできる他、回転や移動などのアニメーションにも使われています。
今回は、「transform」の値の中でも基本的に使われているものを中心に解説していきたいと思います。

それではいってみましょう。

[もくじ]
skew(傾斜)
rotate(回転)
translate(移動)
あとがき

「skew」は要素を傾斜させる値になります。

四角から平行四辺形に変形させるイメージです。

サンプルはこちら。

See the Pen
BaopobE by 朱夏 (@syunatsu1)
on CodePen.

変化が解りやすいようにマウスカーソルを重ねた時に変形する様にしてみました。

書き方はこんな感じになります。

横に傾斜：transform: skewXX軸に傾斜(30deg回転値);

縦に傾斜：transform: skewYY軸に傾斜(30deg回転値);

縦横に傾斜：transform: skew傾斜(30degX方向, 30degY方向);

要素の形そのものを変形させる事が出来ます。
周りの要素への影響が強いので使い所を考えて使っていきたいですね。

「rotate」要素を回転させる値です。

サンプルはこちらになります。

See the Pen
wvKgMLo by 朱夏 (@syunatsu1)
on CodePen.

回転方向が解りやすいように、transitionを使って0.5秒かけて変形する様にしました。

書き方はこんな感じになります。

X軸で回転：transform: rotateXX軸回転(180deg回転値);

Y軸で回転：transform: rotateYY軸回転(180deg回転値);

Z軸で回転：transform: rotateZZ軸回転(180deg回転値);
※Z軸回転は「rotate」(Zなし)でもOK

回転は割と良く使われる値の一つかなと思います。

「translate」要素を移動させる値になります。

サンプルはこちらです。

See the Pen
vYNgGLO by 朱夏 (@syunatsu1)
on CodePen.

要素が重なってしまう部分もあるので、移動と一緒に色も変わる様にしてみました。

書き方は以下の様になります。

X軸方向へ移動：transform: translateXX軸移動(100px移動値);

Y軸方向へ移動：transform: translateYY軸移動(100px移動値);

X、Y軸へ移動：transform: translate移動(100pxX軸方向, 100pxY軸方向);

スライドさせたり、パッと位置を切り替えたり、使い方は様々あると思います。

というわけで、「transform」を使って要素を変形させる方法について書いてみました。

今回のまとめはこちら。

「transform」に指定できる値には、他にもサイズ変更や3D変形など様々なものがあるので、色々試してみると良いと思います。

今回は以上です。
次回もよろしくお願いします。