CSSのtransform-boxで要素の変形基準を設定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

transform-boxプロパティは、要素に適用する変形（transform）の基準となるボックスを指定するプロパティです。このプロパティを使用すると、どのボックス（要素の枠やコンテンツ領域、ビュー全体）を基準にして変形を行うかを決定できます。

スポンサーリンク

transform-boxの値とその効果の一覧

  • fill-box: 要素の塗りつぶし領域を基準に変形します。
  • view-box: SVG要素において、ビュー領域全体を基準に変形します。
  • border-box: 要素のボーダー領域を基準に変形します。

注意点と関連情報

transform-boxプロパティは主にSVG要素に対して効果的です。HTML要素にも適用できますが、特にSVGのグラフィック要素で基準領域を制御するために有効です。デフォルトでは、fill-boxが適用されますが、変形の基準を変更したい場合はこのプロパティを指定します。

transform-boxが効かない時の原因と対策

transformプロパティが設定されていない

transform-boxは、変形の基準となる領域を制御するプロパティですが、transformプロパティが設定されていないと効果がありません。transformを適用していない要素には、このプロパティの影響がありません。

対策: まず、transformプロパティを設定します。例えば、transform: rotate(45deg); transform-box: fill-box;のように指定します。これにより、transformによる変形が実際に適用され、transform-boxの効果が見られます。

インライン要素に適用していない

transform-boxは、インライン要素やブロック要素に対して効果を発揮しますが、インライン要素に適用しても効果がわかりにくいことがあります。transformを適用している要素がインライン要素でないか確認が必要です。

対策: インライン要素ではなく、ブロックレベル要素に対してtransform-boxを適用します。例えば、<div style="transform: scale(1.5); transform-box: view-box;">のように設定すると、transform-boxの効果がわかりやすくなります。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
  text-align: center;
}

.css-sample-box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  margin: 0 auto;
}

transform-box: fill-box

要素の塗りつぶし領域（content box）を基準に回転しています。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transform-fill"></div>
</div>

CSSコード

.css-sample-transform-fill {
  transform: rotate(45deg);
  transform-box: fill-box;
}

表示結果

transform-box: view-box

ビュー領域（主にSVG要素）を基準に回転します。HTML要素ではこの値の影響は少ないです。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transform-view"></div>
</div>

CSSコード

.css-sample-transform-view {
  transform: rotate(45deg);
  transform-box: view-box;
}

表示結果

transform-box: border-box

要素のボーダー領域を基準に回転します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box css-sample-transform-border"></div>
</div>

CSSコード

.css-sample-transform-border {
  transform: rotate(45deg);
  transform-box: border-box;
}

表示結果

まとめ

  • transform-boxプロパティは、要素のどの領域を基準に変形を行うかを指定します。
  • 主にSVG要素で効果が顕著に表れますが、HTML要素にも適用可能です。
  • fill-boxは、要素の塗りつぶし領域を基準にし、border-boxはボーダー領域を基準にします。
  • view-boxはSVG要素のビュー領域に影響を与えますが、HTML要素にはほとんど影響しません。
スポンサーリンク