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;
| 初期値 | border-box |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
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 の定義 |
草案 | 初期定義 |
ブラウザ実装状況
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 64 | 64 | なし | 55 431 41 —?3 | 51 | ? | なし |
1. 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.
2. 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.
3. 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.