transform-box

transform-box プロパティは、 transformtransform-origin プロパティに関連したレイアウトボックスを定義します。

/* キーワード値 */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/* グローバル値 */
transform-box: inherit;
transform-box: initial;
transform-box: unset;

初期値view-box
適用対象変形可能要素
継承なし
計算値指定通り
アニメーションの種類離散値

構文

transform-box プロパティは、以下のキーワードの 1 つで指定されます。

content-box

コンテンツボックスを参照ボックスとして使用します。 <table> の参照ボックスは、テーブルボックスではなく、安定ラッパーボックスの境界ボックスになります。

border-box
参照ボックスとして、境界ボックスが使用されます。テーブルの参照ボックスはテーブルボックスではなく、テーブルをラップしているボックスの境界ボックスとなります。
fill-box
参照ボックスとしてバウンディングボックスが使用されます。
stroke-box
ストロークのバウンディングボックスを基準ボックスとしています。
view-box
参照ボックスとして、直近の SVG を使用します。SVG ビューポートに viewBox 属性が指定されていた場合、参照ボックスは viewBox 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は viewBox 属性の幅と高さの値に設定されています。

形式文法

content-box | border-box | fill-box | stroke-box | view-box

仕様書

仕様書 状態 備考
CSS Transforms Level 1
transform-box の定義
草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報