SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.09.05
  • CATEGORY
TITLE

【CSS】transform-originの使い方、中心点(位置)を指定する!

SHU[シュウ]

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

シュウ
シュウ
今回は【CSS】transform-originの使い方、中心点(位置)を指定する!
の解説になります!

こんな方に読んでほしい

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

今回は、前回に続きtransformに関する記事になります。
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定します。

transform-originの使い方について

transform-originの使い方について

transform-originプロパティとは、要素を2D、3Dに変形させる時の中心点(位置)を指定します。
中心点の位置は、要素の左上からの長さをスペースで区切って指定します。
書き方は以下のようになります。

/*transform-origin*/
要素 {
	transform: 関数(数値);
	transform-origin: 値;
}
指定できる値
  • 数値+単位
    要素の左上から見て数値と単位で指定します。
    例) 「transform-origin: 50px 100px」のように指定します。
  • %
    要素の幅、高さの割合を指定します。
    例) 「transform-origin: 50% 50%」は要素の中心となります。
  • left
    要素のX軸を0%(左端)に指定します。
  • right
    要素のX軸を100%(右端)に指定します。
  • top
    要素のY軸を0%(上端)に指定します。
  • bottom
    要素のY軸を100%(下端)に指定します。
  • center
    要素のX軸またはY軸を50%(中心)に指定します。

transform-origin 数値+単位について

数値+単位とは、要素の左上から見て数値と単位で指定します。初期値は「50% 50% 0」になります。
「赤色 box」は、初期値の位置から、「X軸100px、Y軸50px」の位置を指定しています。
「黄色 box」は、初期値の位置から、「X軸100%、Y軸0%」の右上の位置を指定しています。

今回は「rotate (45deg)」回転をサンプルに解説の記事を書いております。

数値+単位について

100px 50px
100% 0%
<!--赤色 box-->
<div class="origin-box">
	<div class="element origin-1">100px 50px</div>
</div>

<!--黄色 box-->
<div class="origin-box">
	<div class="element origin-2">100% 0%</div>
</div>
/*--共通 CSS--*/
.origin-box {
  width: 150px;
  height: 150px;
  background-color: #ccc;
  display: inline-block;
  margin: 80px 100px 50px;
}

.element {
  width: 150px;
  height: 150px;
  position: relative;
  color: #333;
  text-align: center;
  line-height: 150px;
  transform: rotate(45deg);
}

/*--赤色 box--*/
.origin-1 {
  background-color: #fd6158;
  transform-origin: 100px 50px;
}

/*--黄色 box--*/
.origin-2 {
  background-color: #febe3e;
  transform-origin: 100% 0%;
}

transform-origin キーワード指定について

キーワード指定とは、「top、right、bottom、left、center」と言ったキーワードで指定します。
初期値は「50% 50% 0」になります。
「赤色 box」は、初期値の位置から、「X軸top、Y軸left」の左上の位置を指定しています。
「黄色 box」は、初期値の位置から、「X軸bottom、Y軸right」の右下の位置を指定しています。

キーワード指定について

top left
bottom right
<!--赤色 box-->
<div class="origin-box">
	<div class="element origin-3">top left</div>
</div>

<!--黄色 box-->
<div class="origin-box">
	<div class="element origin-4">bottom right</div>
</div>
/*--共通 CSS 省略--*/
/*--赤色 box--*/
.origin-3 {
  background-color: #fd6158;
  transform-origin: top left;
}

/*--黄色 box--*/
.origin-4 {
  background-color: #febe3e;
  transform-origin: bottom right;
}

関連記事

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

まとめ

今回はこれで以上です。

POINT
  • transform-originプロパティとは、要素を2D、3Dに変形させる時の中心点(位置)を指定します。
  • transform-originを指定する際には、半角スペースで区切って指定しましょう。
スポンサーリンク

SHU

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

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top