【CSS】トランスフォームの基準点の変更方法(transform-origin)

      2016/08/15

transformで回転や拡大縮小をするときは、その基準となる原点を変えたいことがよくあります。
transform-originプロパティを使用すれば、その基準原点を変更する事ができます。

transform-originの使い方

transform-origin: left top; のように
X軸の基準点、Y軸の基準点の2つを、スペースで区切って指定する。
値を省略して1つだけ指定した場合は、Y軸の基準点は「center」として扱われる。

デフォルトでは、要素の中央(50% 50%)が変形の原点になっているが、以下のような値を指定できる。

  • キーワード
    説明
    left X軸の0%と同じ
    right X軸の100%と同じ
    top Y軸の0%と同じ
    bottom Y軸の100%と同じ
    center X軸、Y軸ともに50%と同じ
  • パーセンテージ
    100%のように数値で指定する
  • 長さ
    10pxのように数値で指定する

【使用例】回転の基準点を、「デフォルト」、「左上にした時」で比較する。

(CSS)
				.wrap {
					background: beige;
					height: 100px;
					margin: 50px 0px;
				}
				.box  {
						width: 100px;
						height: 100px;
						background: gold;
						border: 1px solid yellow;
						transform: rotate(-30deg);
				}
				#box2 {	transform-origin: 0px 0px; }
			
(HTML)
				<div class="wrap">
					<div id="box1" class="box">box1</div>
				</div>
				<div class="wrap">
					<div id="box2" class="box">box2</div>
				</div>
			
(実行結果)

回転の原点が中心(デフォルト)

box1

回転の原点を左上に変更

box2


今回はtransform-originプロパティについてまとめました。
キーワードを覚えておくと、基準点が直感的に分かるので、使える場合は使っていきたいですね。

 - css , , , , ,