transform-box
プロパティは、 transform
と transform-origin
プロパティに関連したレイアウトボックスを定義します。
/* キーワード値 */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;
/* グローバル値 */
transform-box: inherit;
transform-box: initial;
transform-box: unset;
初期値 | view-box |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
構文
transform-box
プロパティは、以下のキーワードの 1 つで指定されます。
値
content-box
-
コンテンツボックスを参照ボックスとして使用します。
<table>
の参照ボックスは、テーブルボックスではなく、安定ラッパーボックスの境界ボックスになります。 border-box
- 参照ボックスとして、境界ボックスが使用されます。テーブルの参照ボックスはテーブルボックスではなく、テーブルをラップしているボックスの境界ボックスとなります。
fill-box
- 参照ボックスとしてバウンディングボックスが使用されます。
stroke-box
- ストロークのバウンディングボックスを基準ボックスとしています。
view-box
- 参照ボックスとして、直近の SVG を使用します。SVG ビューポートに
viewBox
属性が指定されていた場合、参照ボックスはviewBox
属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法はviewBox
属性の幅と高さの値に設定されています。
形式文法
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transforms Level 1 transform-box の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。