90°回転させた要素をブロック要素内右側に収めるtransform-originの設定

2024.06.14

右上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。
デモページはこちら

htmlは以下のように準備して確認します。

<p>transform: rotate(90deg);設定前の状態</p>
<div class="div-parent"><div class="div-child-01"></div></div>

<p>transform-origin: 50% 50%;の場合（初期値）</p>
<div class="div-parent"><div class="div-child-02"></div></div>

<p>transform-origin: top left;の場合</p>
<div class="div-parent"><div class="div-child-03"></div></div>

<p>transform-origin: 60px 20px;の場合</p>
<div class="div-parent"><div class="div-child-04"></div></div>

<p>transform: translateY(40px);、transform-origin: 60px 20px;の場合</p>
<div class="div-parent"><div class="div-child-05"></div></div>

<p>left: 100%;、transform-origin: top left;の場合</p>
<div class="div-parent"><div class="div-child-06"></div></div>

まず、長方形を回転させる前の状態です。長方形のサイズは幅80px、高さ40pxで統一します。長方形はposition: absolute;で、top: 0;right: 0;を設定して右上に配置します。

.div-parent {
	position: relative;
	min-height: 100px;
	margin: 0 0 1em;
	background-color: #fff;
}
.div-child-01 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;
	background-color: orange;
}

次に、長方形を90°回転させてtransform-originを設定しなかった時の状態です。transform-originは初期値のtransform-origin: 50% 50%;が適用されます。回転の基準点となる原点が長方形の中心となるため、親のブロック要素内に収まりません。

.div-child-02 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;
	background-color: blue;
	transform: rotate(90deg);
}

次に、transform-origin: top left;を設定します。この場合、長方形の左上が原点となるため親のブロック要素の右側に余白ができます。

.div-child-03 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;
	background-color: green;
	transform: rotate(90deg);
	transform-origin: top left;
}

次に、transform-origin: 60px 20px;を設定します。長方形の左上から右下方向へX軸60px→Y軸20pxの位置が原点です。やはり親のブロック要素内に収まりません。

.div-child-04 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;
	background-color: red;
	transform: rotate(90deg);
	transform-origin: 60px 20px;
}

次に、transform-origin: 60px 20px;に加え、transform: translateY(40px);を設定します。長方形を下方向へ40px移動させることで親のブロック要素内に収めることができました。

.div-child-05 {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 40px;
	background-color: brown;
	transform: translateY(40px) rotate(90deg);
	transform-origin: 60px 20px;
}

ただし上記の方法では長方形の幅が可変の場合に対応できません。そこで、right: 0;で配置していた長方形をleft: 100%;で配置し、transform-origin: top left;を設定します。これで回転の原点や長方形の移動距離を測ることなく、親のブロック要素内に収めることができました。

.div-child-06 {
	position: absolute;
	top: 0;
	left: 100%;
	width: 80px;
	height: 40px;
	background-color: purple;
	transform: rotate(90deg);
	transform-origin: top left;
}