transform-origin：要素を座標変換させる時の原点を指定する

transform-originプロパティの説明

transform-originは、要素を座標変換させる時の原点を指定します。座標変換の原点とは、その点を中心にして要素の変形が行われる座標のことです。例えば、transformプロパティにrotate()関数を指定し、要素を回転させようとした時、その原点は回転の中心になります。

原点の座標は、x軸、y軸、z軸のオフセット値で場所を定めます。最初の原点は(0, 0)にあります。そこから、どれだけ移動するのかを<length>値や<percentage>値で定めます。

transform-originは、オフセットを表す1つから3つの値を使用します。

• 1つの値が指定された場合は、水平方向のオフセットを表します。ただし、topとbottomの場合は垂直方向を表します。この場合に使用できるのは、<length>、<percentage>、またはキーワードのleft、center、right、top、bottomのいずれかです。
• 2つの値が指定された場合は、1つ目の値を水平方向、2つ目の値を垂直方向として扱います。1つ目の値に使用できるのは、<length>、<percentage>、またはキーワードのleft、center、rightのいずれかです。2つ目の値に使用できるのは、<length>、<percentage>、またはキーワードのtop、center、bottomのいずれかです。
• 3つ目の値はz軸のオフセットを表します。使用できるのは<length>のみです。

transform-originに指定できる値

x-offset

<length>や<percentage>によって、ボックスの左辺と座標変換の原点までの距離を示します。

y-offset

<length>や<percentage>によって、ボックスの上辺と座標変換の原点までの距離を示します。

offset-keyword

キーワードのleft、right、top、bottom、centerによって、対応するオフセットを示します。

x-offset-keyword

キーワードのleft、right、centerによって、ボックスの水平方向のどこに寄せるのかを示します。

y-offset-keyword

キーワードのtop、bottom、centerによって、ボックスの垂直方向のどこに寄せるのかを示します。

z-offset

画面の奥行きを示すz軸方向のオフセットを<length>で示します。

キーワードに対応した割合の表

キーワードは、特定の<percentage>を表すショートカットです。各キーワードを指定した場合は、次の表で示される割合を指定した場合と同じ効果になります。

transform-originの使い方とサンプル

transform-originプロパティの構文は以下の通りです。

/* x-offset */
transform-origin: 10px;
transform-origin: left;

/* x-offset | y-offset */
transform-origin: 10px 20px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* offset-keyword | y-offset-keyword */
transform-origin: 10px top;

/* x-offset-keyword | y-offset-keyword */
transform-origin: left center;

/* y-offset-keyword | x-offset-keyword */
transform-origin: bottom right;

/* x-offset | y-offset | z-offset */
transform-origin: 10px 20% 30px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 20px -5px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 3rem;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 3rem;

/* グローバル値 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: unset;

transform-originの実例

それでは実際にtransform-originプロパティの書き方を見ていきましょう。以下の例は、transformのrotate()関数を使って要素を回転させた時に、その原点の位置を変更した時の比較です。

最初のセクションは要素の中心を軸に回転していますが、以降のセクションでは各辺の角を軸に回転しています。もちろん、原点の位置はz軸とy軸の座標を変えることによって自由に動かすことができます。アニメーションと連携したりユーザーの操作をトリガーとすることで、面白い動きが作れるでしょう。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > div {
	position: relative;
	width: 200px;
	height: 100px;
	margin: 1rem 0 0;
	border: 1px solid #ccc;
	text-align: center;
}
section > div > span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border: 1px solid #333;
}
.rotate > span[id] {
	transform: rotate(30deg);
	background-color: #09f;
	color: #fff;
	opacity: 50%;
}
#to_1 {
	transform-origin: 50% 50% 0;
}
#to_2 {
	transform-origin: 0 0;
}
#to_3 {
	transform-origin: 100% 0;
}
#to_4 {
	transform-origin: 0 100%;
}
#to_5 {
	transform-origin: 100% 100%;
}

<div class="samp_box">
	<section>
		<h1>transform-origin: 50% 50% 0;（初期値）</h1>
		<div class="rotate">
			<span></span>
			<span id="to_1"></span>
		</div>
	</section>
	<section>
		<h1>transform-origin: 0 0;</h1>
		<div class="rotate">
			<span></span>
			<span id="to_2"></span>
		</div>
	</section>
	<section>
		<h1>transform-origin: 100% 0;</h1>
		<div class="rotate">
			<span></span>
			<span id="to_3"></span>
		</div>
	</section>
	<section>
		<h1>transform-origin: 0 100%;</h1>
		<div class="rotate">
			<span></span>
			<span id="to_4"></span>
		</div>
	</section>
	<section>
		<h1>transform-origin: 100% 100%;</h1>
		<div class="rotate">
			<span></span>
			<span id="to_5"></span>
		</div>
	</section>
</div>

アニメーションとの組み合わせ

続いてanimationプロパティとの連携を紹介します。以下の例は、transformのscale()関数を使って拡大するアニメーションを指定した要素に、別のステップアニメーションを追加して拡大する原点を変えていく内容です。

単純に拡大を繰り返すアニメーションであれば、ありきたりの表現になりかねない内容ですが、拡大が始まる原点の位置を変えていくことで、目を引く効果を実現しています。これはあくまで参考に過ぎませんが、このようにtransform-originの機能を応用することで、表現の幅が広がることを覚えておきましょう。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > div {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 1rem 0 0;
	border: 1px solid #000;
	text-align: center;
}
section > div > span {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #09f;
}
.anime {
	animation: anime_1 1s infinite, anime_2 4s steps(4, jump-none) infinite;
}
@keyframes anime_1 {
	0% { transform: scale(0);}
	100% { transform: scale(1);}
}
@keyframes anime_2 {
	0% { transform-origin: 0 0;}
	24% { transform-origin: 0 0;}
	25% { transform-origin: 100% 0;}
	49% { transform-origin: 100% 0;}
	50% { transform-origin: 0 100%;}
	74% { transform-origin: 0 100%;}
	75% { transform-origin: 100% 100%;}
	100% { transform-origin: 100% 100%;}
}

<div class="samp_box">
	<section>
		<h1>animation with transform + transform-origin</h1>
		<div>
			<span class="anime"></span>
		</div>
	</section>
</div>