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 をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 64 | Edge 未対応 なし | Firefox
完全対応
55
| IE 未対応 なし | Opera 完全対応 51 | Safari ? | WebView Android 完全対応 64 | Chrome Android 完全対応 64 | Edge Mobile 未対応 なし | Firefox Android
完全対応
55
| Opera Android 完全対応 51 | Safari iOS ? | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。