[CSS] 変形transformの使い方

どうも、べ〜やんです。

今回は、デザインを変形させるtransformを紹介します。

transformとは

transformは変形を指定するプロパティで、transitionとセットで使用することも多いです。

使用できる基本的な関数は以下の通り↓

transform: rotate();  /* 回転 */
transform: translate();　/* 移動 */
transform: scale();　/* 伸縮 */
transform: skew();　/* 歪み */

使い方

それでは、transformの使い方を確認していきます。

transformなしの基本的なスタイルは以下の通り↓

See the Pen pooQVRW by beeyan (@orientado) on CodePen.

rotate　回転

まずは、rotate関数からみてみます。

回転させる角度を指定します、使用する単位はdeg。

transform: rotateX();  /* X軸方向のみ指定 */
transform: rotateY();　/* Y軸方向のみ指定 */
transform: rotate( , );　/* カンマで区切って複数指定 */

今回は45度回転させます。

See the Pen wvvQjgz by beeyan (@orientado) on CodePen.

translate 移動

translateは移動を指定します。

どの方向にどのくらい移動させるのか指定します。

transform: translateX();  /* X軸方向のみ指定 */
transform: translateY();　/* Y軸方向のみ指定 */
transform: translate( , );　/* カンマで区切って複数指定 */

See the Pen ZEEmojj by beeyan (@orientado) on CodePen.

scale 伸縮

scaleは伸縮を指定します。

transform: scaleX();  /* X軸方向のみ指定 */
transform: scaleY();　/* Y軸方向のみ指定 */
transform: scale( , );　/* カンマで区切って複数指定 */

See the Pen KKKrRyy by beeyan (@orientado) on CodePen.

skew 歪み

skewは歪みを指定します。

歪みの角度を指定するので単位はdeg

transform: skewX();  /* X軸方向のみ指定 */
transform: skewY();　/* Y軸方向のみ指定 */
transform: skew( , );　/* カンマで区切って複数指定 */

See the Pen BaaGxrp by beeyan (@orientado) on CodePen.

perspective(奥行き)と併用

奥行きを指定するperspectiveと併用することでZ軸方向にも変形できます。

See the Pen wvvQjXd by beeyan (@orientado) on CodePen.

:hoverと併用

擬似要素の:hoverと併用することで動きのある変形ができます。

See the Pen bGGQMxR by beeyan (@orientado) on CodePen.

transitionと併用

変化のタイミングやスピードなどを指定するtransitionと併用することも多いです。

See the Pen yLLQjQE by beeyan (@orientado) on CodePen.

transitionについてはこちらもどうぞ↓

[CSS] 変化Transitionの使い方

transform-origin(起点)と併用

transform-originは変化の起点を指定するプロパティです。

値はleft、center、fightやtop、center、bottom、またはpxや%で指定します。

使用例の一部↓

transform-origin: left top ;  /* 左上の端が起点 */
transform-origin: 0% 0%;  /* 左上の端が起点 */
transform-origin: 0px 0px;  /* 左上の端が起点 */
transform-origin: left bottom;  /* 左下の端が起点 */
transform-origin: right top;  /* 右上の端が起点 */
transform-origin: 100% 0%;  /* 右上の端が起点 */
transform-origin: right bottom;  /* 右下の端が起点 */
transform-origin: center center;  /* 中心が起点 */

See the Pen XWWyYRr by beeyan (@orientado) on CodePen.

おわりに

今回は、デザインを変形させるtransformを紹介しました。

CSSだけで簡単に設定できるので便利ですね。