transform-box
transform-box は、transform-origin や translate の % を測るときの基準の箱（参照ボックス）を選びます。主に SVG の図形を、自分の中心で回したいときに使います。
構文
content-box | border-box | fill-box | stroke-box | view-boxプレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
border: 16px solid rgb(31 41 55 / 0.3);
padding: 32px;
transform-origin: left top;
transform: rotate(30deg) scale(0.6);
transform-box: content-box;
}コントロール
transform-boxcontent-box
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
content-box：内側の余白（padding）の内側の箱を基準にします。border-box：枠線（border）の外側までの箱を基準にします。fill-box：SVG の図形そのものを囲む箱を基準にします。stroke-box：SVG の図形を、線の太さも含めて囲む箱を基準にします。view-box：初期値です。いちばん近い SVG の表示領域（viewBox）を基準にします。
HTML の要素では、fill-box は content-box と、stroke-box と view-box は border-box と同じになります。そのため HTML の要素の初期値は、枠線の外側までの箱です。
何が変わるか
transform-origin の位置と、translate(50%) などの % がどの箱に対して決まるかが変わります。このページのプレビューは、補助の宣言で枠線と内側の余白を付け、transform-origin: left top を中心に rotate(30deg) scale(0.6) で回して縮めています。点線の枠が元の位置です。content-box では中心が内側の余白の内側の角になり、border-box では枠線の外の角になるので、回ったあとの位置がずれます。
よく使う場面
SVG の中の図形は、初期値の view-box では SVG 全体の表示領域が基準になり、transform-origin の初期値も左上（0 0）です。図形を自分の中心で回すアニメーションでは、transform-box: fill-box と transform-origin: center を組み合わせます。
気をつけること
- 主要なブラウザすべてで使えます。
content-boxとstroke-boxは Chrome・Edge が 118、Firefox が 125 から対応しています。