CSS3

プロパティ

transform-box

→●、mdn

変形基準ボックス。

transform、transform-origin プロパティにより定義される変形の位置と寸法は、次のいずれかとして指定される 基準ボックス に相対的になる：

content-box

内容ボックスを基準ボックスに利用する。テーブルの基準ボックスは、そのテーブル ボックスではなく、そのテーブル包装ボックスのボーダー ボックスになる。

<IMG src="Com/Picture.jpg" style="
 border:10px outset #f005;
 padding:5px;
 transform-box:content-box;
 transform:rotate(15deg);
">

¶

border-box

ボーダー ボックスを基準ボックスに利用する。テーブルの基準ボックスは、そのテーブル ボックスではなく、そのテーブル包装ボックスのボーダー ボックスになる。

<IMG src="Com/Picture.jpg" style="
 border:10px outset #f005;
 padding:5px;
 transform-box:border-box;
 transform:rotate(15deg);
">

¶

fill-box

オブジェクト限界ボックスを基準ボックスに利用する。

<IMG src="Com/Picture.jpg" style="
 border:10px outset #f005;
 padding:5px;
 transform-box:fill-box;
 transform:rotate(15deg);
">

¶

stroke-box

ストローク限界ボックスを基準ボックスに利用する。

<IMG src="Com/Picture.jpg" style="
 border:10px outset #f005;
 padding:5px;
 transform-box:stroke-box;
 transform:rotate(15deg);
">

¶

view-box

最も近い SVG 表示域（SVG viewport）を基準ボックスに利用する。

【“最も近い SVG 表示域” ― SVG 表示域を確立する要素のうち，当の要素に最も近い［先祖（または要素自身？）］が確立したそれ。】

SVG 表示域を作成している【確立している】要素に viewBox 属性が指定されている場合：

• 基準ボックスは viewBox 属性により確立される座標系の原点に位置される。
• 基準ボックスの寸法は viewBox 属性の width、height 成分値に設定される。

SVG pattern 要素に対しては、基準ボックスは patternUnits 属性により定義される。[SVG2]

SVG［linearGradient／radialGradient］要素に対しては、基準ボックスは gradientUnits 属性により定義される。[SVG2]

SVG clipPath 要素に対しては、 基準ボックスは clipPathUnits 属性により定義される。[CSS-MASKING]

基準ボックスは、transform-origin プロパティにより指定される原点に対し、追加のオフセットを加える

CSS レイアウトボックスが結び付けられていない SVG 要素に対しては、content-box 用の使用値は fill-box になる。

CSS レイアウトボックスが結び付けられている要素に対しては、fill-box 用の使用値は content-box になり、［stroke-box／view-box］用の使用値は border-box になる。

テスト