SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.08.30
  • CATEGORY
TITLE

【CSS】transformの使い方、要素を2Dに変形する!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】transformの使い方、要素を2Dに変形する!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • transformプロパティについて学びたい方へ
  • 今回はtransform2D編についての解説になります。

上の図のように、transformを指定することにより、画像を回転させることも可能です。
また、その他にも、「拡大・縮小」、「傾斜」、「移動」などといったことが可能です。

transformの使い方について

transformの使い方について

transformプロパティとは、要素を2D、3Dに変形させます。今回は2D編です。
transformでは、「マトリクス変形」、「回転」、「拡大・縮小」、「傾斜」、「移動」の指定が可能です。
今回は個別に書き方をご紹介していきます。

transform マトリクス変形について

transform マトリクス変形について

6個の数値をカンマ(,)で区切り2D変形の指定します。
transform マトリクス変形の書き方は以下になります。

/*transform matrix*/
要素 {transform: matrix(a, b, c, d, e, f);}
指定できる値
  • a
    水平方向の縮尺率(scaleX)
  • b
    垂直方向の傾斜率(skewY)
  • c
    水平方向の傾斜率(skewX)
  • d
    垂直方向の縮尺率(scaleY)
  • e
    水平方向の移動距離(translateX)
  • f
    垂直方向の移動距離(translateY)

 「クマの画像」に対して、水平方向の縮尺率「1」、垂直方向の傾斜率「0.4」、水平方向の傾斜率「0」、
水平方向の傾斜率「0.5」、水平方向の移動距離「10」、垂直方向の移動距離「10」の指定をしています。
「キリンの画像」に対して、垂直方向の傾斜率「-0.4」とマイナス指定をしています。
マイナス指定も可能になります。

マトリクス変形について

<img src="画像パス(クマの画像)" class="matrix01">
<img src="画像パス(キリンの画像)" class="matrix02">
/*--クマの画像--*/
img.matrix01 {transform: matrix(1, 0.4, 0, 0.5, 10, 10);}

/*--キリンの画像--*/
img.matrix02 {transform: matrix(1, -0.4, 0, 0.5, 10, 10);}

ベンダープレフィクスについて

「transform」ですが、ブラウザによっては対応しない可能性があります。
対応しない場合はベンダープレフィクスの指定をおこないましょう。
「Can I use」(https://caniuse.com/)では、対象のブラウザでベンダープレフィックスが必要かどうかを確認してくれます。
黄色枠に対象となるCSSを入力してください。

Can I use
ベンダープレフィックス
  • -webkit-
    Chrome、Safari、
    ※Operaは元は「-o-」でしたが、現在は「-webkit-」になってます
  • -moz-
    Firefoxになります
  • -ms-
    Internet Explorer、Microsoft Edgeになります

transform マトリクス変形のベンダープレフィックスの書き方は以下になります。

/*transform matrix*/
要素 {
	-webkit-transform: matrix(a, b, c, d, e, f);
	-moz-transform: matrix(a, b, c, d, e, f);
	-ms-transform: matrix(a, b, c, d, e, f);
	transform: matrix(a, b, c, d, e, f);
}

transform 回転について

transform 回転について

回転を指定するには、rotate関数を使用します。
transform 回転の書き方は以下になります。

/*transform rotate*/
要素 {transform: rotate(回転角度);}
指定できる値
  • rotate
    要素を時計周りに回転させます。通常は回転角度を示す単位degを使用します。

 「クマの画像」に対して「20deg」は時計周りに20度回転になります。
 「キリンの画像」に対して「-20deg」は反時計周りに20度回転になります。

回転について

<img src="画像パス(クマの画像)" class="rotate01">
<img src="画像パス(キリンの画像)" class="rotate02">
/*--クマの画像--*/
img.rotate01 {transform: rotate(20deg);}

/*--キリンの画像--*/
img.rotate02 {transform: rotate(-20deg);}

transform 拡大・縮小について

transform 拡大・縮小について

拡大・縮小を指定するには、scale関数を使用します。
transform 拡大・縮小の書き方は以下になります。

/*transform matrix*/
要素 {transform: scale(sx,sy);}

/*scaleX X軸方向*/
要素 {transform: scaleX();}

/*scaleY Y軸方向*/
要素 {transform: scaleY();}
指定できる値
  • scale(sx,sy)
    要素をX軸、Y軸方向に拡大・縮小します。
  • scaleX
    要素をX軸方向に拡大・縮小します。
  • scaleY
    要素をY軸方向に拡大・縮小します。

 「クマの画像」に対して「1.4,0.5」と指定し、X軸方向は1.4倍に拡大し、Y軸方向は0.5(50%)に縮小しています。
 「キリンの画像」に対して「X=1.4」と指定し、X軸方向は1.4倍に拡大しています。

拡大・縮小について

<img src="画像パス(クマの画像)" class="scale01">
<img src="画像パス(キリンの画像)" class="scale02">
/*--クマの画像--*/
img.scale01 {transform: scale(1.4,0.5);}

/*--キリンの画像--*/
img.scale02 {transform: scaleX(1.4);}

transform 傾斜について

transform 傾斜について

傾斜を指定するには、skew関数を使用します。
transform 傾斜の書き方は以下になります。

/*transform skew*/
要素 {transform: skew(X軸,Y軸);}

/*skewX X軸方向*/
要素 {transform: skewX();}

/*skewY Y軸方向*/
要素 {transform: skewY();}
指定できる値
  • skew(X軸,Y軸)
    要素をX軸、Y軸方向に傾けます。
  • skewX
    要素をX軸方向に傾けます。
  • skewY
    要素をY軸方向に傾けます。

 「クマの画像」に対して「15deg」と指定し、X軸方向に傾斜率15度の指定をしています。
 「キリンの画像」に対して「15deg」と指定し、Y軸方向に傾斜率15度の指定をしています。

傾斜について

<img src="画像パス(クマの画像)" class="skew01">
<img src="画像パス(キリンの画像)" class="skew02">
/*--クマの画像--*/
img.skew01 {transform: skewX(15deg);}

/*--キリンの画像--*/
img.skew02 {transform: skewY(15deg);}

transform 移動について

transform 移動について

移動を指定するには、translate関数を使用します。
transform 移動の書き方は以下になります。

/*transform matrix*/
要素 {transform: translate(X軸の移動距離,Y軸の移動距離);}

/*translateX X軸方向*/
要素 {transform: translateX(移動距離);}

/*translateY Y軸方向*/
要素 {transform: translateY(移動距離);}
指定できる値
  • translate(X軸の移動距離,Y軸の移動距離)
    要素をX軸、Y軸方向に移動します。
  • translateX
    要素をX軸方向に移動します。
  • translateY
    要素をY軸方向に移動します。

 「クマの画像」に対して「50px, 25px」と指定し、X軸方向に50px、Y軸方向に25pxの移動を指定をしています。
 「キリンの画像」に対して「X-50px」と指定し、X軸方向に移動-50pxの指定をしています。

移動について

<img src="画像パス(クマの画像)" class="translate01">
<img src="画像パス(キリンの画像)" class="translate02">
/*--クマの画像--*/
img.translate01 {transform: translate(50px, 25px);}

/*--キリンの画像--*/
img.translate02 {transform: translateX(-50px);}

関連記事

【CSS】transformの使い方、要素を3Dに変形する!
transform(3D)では、「マトリクス変形」、「回転」、「拡大・縮小」、「移動」、「遠近効果」についての指定
【CSS】transform-originの使い方、中心点(位置)を指定する!
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定
【CSS】transform-styleの使い方、3D変形を適用させる!
transform-styleとは、3D変形させる時の子要素の配置方法を指定します。

まとめ

今回は2Dに関しての基本的な指定方法について書きましたが、
次回は3Dに関しての記事を書きます。

POINT
  • マトリクス変形 matrix
  • 回転 rotate(回転角度);
  • 拡大・縮小 scale(sx,sy)
  • 傾斜 skew(X軸,Y軸)
  • 移動 translate(X軸の移動距離,Y軸の移動距離)
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top