transform-box

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

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

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

構文

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

値

border-box

参照ボックスとして、border box が使用されます。テーブルの参照ボックスはテーブルボックスではなく、テーブルをラップしているボックスの border box となります。

fill-box

参照ボックスとして bounding box が使用されます。

view-box

参照ボックスとして、直近の SVG を使用します。SVG ビューポートに viewBox 属性が指定されていた場合、参照ボックスは viewBox 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は viewBox 属性の幅と高さの値に設定されています。

形式文法

border-box | fill-box | view-box

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• CSS 変形の利用
• transform, transform-origin