この記事は編集レビューを必要としています。ぜひご協力ください。
これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transform-box プロパティは、transform と transform-origin プロパティに関連したレイアウトボックスを定義します。
| 初期値 | border-box |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* キーワード値 */ transform-box: border-box; transform-box: fill-box; transform-box: view-box; /* グローバル値 */ transform-box: inherit; transform-box: initial; transform-box: unset;
値
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 の定義 |
草案 | 初期定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 41.0 (41.0)[1] | 未サポート | 未サポート | ? |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | ? | ? | 41.0 (41.0)[1] | ? | ? | ? |
[1] Gecko 43.0 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40) では、既定値が false の svg.transform-box.enabled によって隠されています。初めて実装されたのは Gecko 41.0 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) ですが、設定名は svg.transform-origin.enabled です。 バグ 923193 と バグ 1208550 を見てください。