【CSS Modules】transform-boxプロパティの使い方
transform-boxプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
transform-boxプロパティは、CSSの変形（transform）を適用する際の参照ボックスを定義するプロパティです。このプロパティは、要素に回転、拡大縮小、移動といった変形を適用する際、その変形の基準となる原点（transform-origin）の計算に使用される参照領域を指定します。これにより、変形がどの範囲に対して適用されるかを細かく制御できます。
具体的な値として、主に以下のようなものがあります。content-boxは、要素のコンテンツ領域（パディングやボーダーを含まない）を参照ボックスとします。これはHTML要素の標準的な動作に近い挙動を示します。border-boxは、要素のボーダーを含む領域全体を参照ボックスとします。
SVG要素に対しては、より具体的な参照ボックスを指定できます。fill-boxは、SVG要素の塗りつぶしボックス、つまり描画内容の境界ボックスを参照とします。stroke-boxは、SVG要素のストローク（線）を含む領域全体を参照ボックスとします。さらに、view-boxは、SVG要素のviewBox属性で定義されたビューポートを参照ボックスとして使用します。
このプロパティは、特にSVG要素や複雑なグラフィック要素に変形を適用する場合に非常に重要です。transform-boxを適切に設定することで、transform-originプロパティで指定された変形原点が意図した位置に正確に計算され、期待通りの変形結果を得ることができます。要素の変形挙動を細かく制御し、transformプロパティとtransform-originプロパティの効果を微調整するために役立つプロパティと言えるでしょう。
構文(syntax)
1selector { 2 transform-box: content-box; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません