Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

transform-box

transform-box は CSS のプロパティで transform、独立した変換プロパティである translate、scale、rotate、および transform-origin プロパティが相対するレイアウトボックスを定義します。

変形基準参照ボックス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transform-box
64
79
55
11
64
11
border-box
118
118
55
11
118
11
content-box
118
118
125
13.1
118
13.4
fill-box
64
79
55
11
64
11
stroke-box
118
118
125
13.1
118
13.4
view-box
64
79
55
11
64
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.svg-element {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

ライブデモ

fill-box

CSS Fill-box demo.

プレビュー全画面表示

stroke-box

CSS Stroke-box demo.

プレビュー全画面表示

view-box

CSS View-box demo.

プレビュー全画面表示

実務での使いどころ

  • SVG要素の正確な回転

    SVG要素を自身の中心を基準に回転させるため、transform-box: fill-box を設定して参照ボックスを要素自体に限定します。

注意点

  • デフォルト値がSVG要素では view-box、HTML要素では border-box であるため、混在環境での動作に注意が必要です。

アクセシビリティ

  • 変形は視覚的な表現のみに影響し、DOM構造やスクリーンリーダーの読み上げ順序には影響しません。

参考リンク