| 属性名 | transform-box |
|---|---|
| 値 | content-box | border-box | fill-box | stroke-box | view-box |
| 初期値 | view-box |
| 適用可能要素 | トランスフォーム要素 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_transform-box |
transform の対象とする領域を指定します。値の意味は box-sizing も参照してください。
content-box と同じになります。border-box と同じになります。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>