これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

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

初期値border-box
適用対象変形可能要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 完全対応 55
完全対応 55
完全対応 43
無効
無効 From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 41 — 43
無効
無効 From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 51Safari ? WebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 完全対応 55
完全対応 55
完全対応 43
無効
無効 From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 41 — ?
無効
無効 From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 51Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dskmori, YuichiNukiyama
最終更新者: mfuji09,