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] 自動ナンバリングする方法

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

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …