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で隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[css] font-sizeの種類

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

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …