transform-box
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
transform-box は CSS のプロパティで transform、独立した変換プロパティである translate、scale、rotate、および 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: revert;
transform-box: revert-layer;
transform-box: unset;
transform-box プロパティは、以下のいずれかのキーワードで指定されます。
値
content-box-
コンテンツボックスを参照ボックスとして使用します。
<table>の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。 border-box-
境界ボックスを参照ボックスとして使用します。
<table>の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。 fill-box-
そのオブジェクトのバウンディングボックスを参照ボックスとして使用します。
stroke-box-
ストロークのバウンディングボックスを参照ボックスとして使用します。
view-box-
直近の SVG のビューポートを参照ボックスとして使用します。 SVG ビューポートに
viewBox属性が指定されていた場合、参照ボックスはviewBox属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法はviewBox属性の幅と高さの値に設定されます。関連する CSS レイアウトボックスを持つ要素の場合、border-boxとして動作します。
公式定義
| 初期値 | view-box |
|---|---|
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
例
SVG の transform-origin のスコープ
この例では、以下のような SVG があるとします。
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<g>
<circle id="center" fill="red" r="1" transform="translate(25 25)" />
<circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
<rect
id="box"
x="10"
y="10"
width="10"
height="10"
rx="1"
ry="1"
stroke="black"
fill="none" />
</g>
</svg>
CSS では、長方形を無限に回転させるために変換を使用するアニメーションがあります。 transform-box: fill-box は transform-origin をバウンディングボックスの中心にするために使用しているので、長方形は配置されたまま回転します。これがないと、座標変換の原点は SVG キャンバスの中心になるので、極めて異なる効果になります。
svg {
width: 80vh;
border: 1px solid #d9d9d9;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#box {
transform-origin: 50% 50%; /* 効果を見るには `0 0` 以外を指定する */
transform-box: fill-box;
animation: rotateBox 3s linear infinite;
}
@keyframes rotateBox {
to {
transform: rotate(360deg);
}
}
この例は Pogany 氏によるものです。ライブ版はこの codepen をご覧ください。
仕様書
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-box |