CODING

[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は変化の起点を指定するプロパティです。

値はleftcenterfighttopcenterbottom、または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だけで簡単に設定できるので便利ですね。



-CODING
-,

執筆者:


comment

関連記事

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …