MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

transform-box

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

transform-box プロパティは、transformtransform-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) では、既定値が falsesvg.transform-box.enabled によって隠されています。初めて実装されたのは Gecko 41.0 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) ですが、設定名は svg.transform-origin.enabled です。 バグ 923193バグ 1208550 を見てください。

関連項目

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

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