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 |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
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 の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | 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.