CSS辞典 transform-boxプロパティ解説
変形の参照ボックスを参照する「transform-boxプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | view-box |
| 適用される要素 | 変形可能な要素 |
| モジュール | CSS Transforms Level1 |
| 継承 | なし |
概要・使用方法
{ transform-box: 参照ボックス;}「transform-boxプロパティ」は変形の際に使用する参照ボックスを指定します。transiformとtransform-originプロパティによって指定された変形の位置やサイズは、参照ボックス（基準となるボックス）に対して相対的になります。
指定できる値（参照ボックス）
| content-box | コンテンツボックスを参照ボックスとして使用します 。テーブルの参照ボックスは、テーブルボックスではなくテーブルラッパーボックスの境界ボックスとなります。 |
| border-box | 境界ボックスを参照ボックスとして使用します。 テーブルの参照ボックスは、テーブルボックスではなくテーブルラッパーボックスの境界ボックスとなります。 |
| fill-box | オブジェクトの境界ボックスを参照ボックスとして使用します。 |
| stroke-box | ストロークの境界ボックスを参照ボックスとして使用します。 |
| view-box | 参照ボックスとしてもっとも近いSVGビューポートを使用します。 |
サンプルコード
transform-boxを初期値（通常）にした場合、SVGビューポートが参照ボックスとなり、transform-origin: 50% 50%の指定からSVG要素の中心が原点になりその周りを衛星のようにくるくる回ります。fill-boxを指定した例では、#boxの境界ボックスを参照ボックスとしているため、変形の原点は#boxの中心となり、その場を回転し続けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>transform-boxプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.box-size {height:250px;}
#svg{
width:200px;
border:1px solid #d9d9d9;
position:absolute;
margin: auto;
}
#box{
transform-origin:50% 50%;
animation: rotateBox 3s linear infinite;
}
.transform-box-content { transform-box: content-box;}
.transform-box-fill { transform-box: fill-box;}
@keyframes rotateBox {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box-size">
<h1>transform-box: content-box;</h1>
<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 class="transform-box-content" id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" />
</g>
</svg>
</div>
<div class="box-size">
<h1>transform-box: fill-box;</h1>
<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 class="transform-box-fill" id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" />
</g>
</svg>
</div>
</body>
</html>