左上に配置した長方形の要素を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: 20px 20px;の場合</p>
<div class="div-parent"><div class="div-child-04"></div></div>

まず、長方形を回転させる前の状態です。長方形のサイズは幅80px、高さ40pxで統一します。

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

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

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

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

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

最後に、transform-origin: 20px 20px;を設定します。値をpxや%で指定した場合、長方形の左上から右下方向への距離を原点として指定することになります。X軸→Y軸の順番で指定します。

20pxは長方形の高さの半分の値です。結果、親のブロック要素内に収めることができます。

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

なお、transform: rotate(90deg);で回転させた要素は、親要素の高さに影響を与えません。高さも含め親要素内に収める場合、親要素自体に回転させた要素が収まる分の高さを設定する必要があります。