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で背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[css] font-sizeの種類

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