CSS - transform-box

• トップ
• CSSリファレンス
• transform-box

概要

説明

transform の対象とする領域を指定します。値の意味は box-sizing も参照してください。

content-box

コンテンツボックスを対象とします。

border-box

ボーダーボックスを対象とします。

fill-box

SVG の場合フィルボックスを対象とします。HTML の場合は content-box と同じになります。

stroke-box

SCG の場合ストロークボックスを対象とします。HTML の場合は border-box と同じになります。

view-box

直近の SVG ビューポートを対象とします。SVG で使用します。HTML の場合は border-box と同じになります。

使用例

下記の例では、赤い四角の位置をベースに、右上(right top)を中心として青い四角を20度傾けています。content-box の時はコンテンツボックス(ボーダーの内側)の右上を中心としますが、border-box に変更するとボーダーボックス(ボーダーの外側)の右上が中心となります。

.my-example {
  position: relative;
  width: 300px;
  height: 150px;
  div {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 50px;
    height: 50px;
    &.my-example-1 {
      border: 20px solid #fcc;
    }
    &.my-example-2 {
      border: 20px solid #ccf;
      transform-origin: right top;
      transform-box: content-box;
      transform: rotate(20deg);
    }
  }
}

document.getElementById("sel").addEventListener("change", (e) => {
  document.querySelector(".my-example-2").style.transformBox = e.target.value;
});

<div class="my-example">
  <div class="my-example-1"></div>
  <div class="my-example-2"></div>
</div>
<select id="sel">
  <option>content-box</option>
  <option>border-box</option>
  <option>fill-box</option>
  <option>stroke-box</option>
  <option>view-box</option>
</select>

リンク

• https://drafts.csswg.org/css-transforms/#transform-box
• https://developer.mozilla.org/ja/docs/Web/CSS/transform-box
• https://caniuse.com/mdn-css_properties_transform-box