“transform-box”プロパティ:変形の基準となるボックス｜CSS－havin' a coffee break

＃

概要

初期値	“transform-box: view-box;”
適用対象	変形可能要素
継承	No
パーセント値	パーセント値は指定できません
計算値	指定した値
アニメーション	離散

“transform-box”プロパティは要素の変形する“transform”プロパティや“transform-origin”プロパティが基準として参照する“参照ボックス”を指定するプロパティです。

“translate()”関数などの変形関数の引数や“transform-origin”プロパティの値に“<percentage>”値を使用した場合、“transform-box”プロパティで指定した参照ボックスの大きさがその基準(“100%”)となります。

一部のSVGの要素は“transform-box”プロパティではなく属性によって参照ボックスが定義されます。

属性によって参照ボックスが定義されるSVGの要素

“<pattern>”要素
“patternUnits”属性が参照ボックスを定義します。: “<linearGradient>”要素と“<radialGradient>”要素
“gradientUnits”属性が参照ボックスを定義します。: “<clipPath>”要素
“clipPathUnits”属性が参照ボックスを定義します。

サンプルコード



div { transform-box: border-box;}

＃

値

値	説明
content-box	コンテント・ボックスを参照ボックスとする (テーブル(“table”要素)の場合、参照ボックスはテーブル包括ボックスのボーダー・ボックス)
border-box	ボーダー・ボックスを参照ボックスとする (テーブル(“table”要素)の場合、参照ボックスはテーブル包括ボックスのボーダー・ボックス)
fill-box	オブジェクト境界ボックスを参照ボックスとする
stroke-box	ストローク境界ボックスを参照ボックスとする
view-box	直近のSVGビューポートを参照ボックスとする (“viewBox”属性があれば、“viewBox”属性によって生成される座標系に合わせて参照ボックスが配置され、寸法も“viewBox”属性の高さと横幅を表す値に合わせれらます。)
共通キーワード

なお、“transform-box”プロパティの適用先となる要素の種類によって使用値が指定された値と異なる場合があります。

関連付けられたボックスがCSSによって生成される要素
指定された値が“fill-box”の場合、使用値は“content-box”です。
指定された値が“stroke-box”もしくは“view-box”の場合、使用値は“border-box”です。: 関連付けられたボックスがCSSによって生成されないSVGの要素
指定された値が“content-box”の場合、使用値は“fill-box”です。
指定された値が“border-box”の場合、使用値は“stroke-box”です。

＃

仕様書

定義されている仕様書



transform-box



content-box
border-box
fill-box
stroke-box
view-box

＃

コンテント・ボックスを基準にする



.transform-content-box {


 animation: 2s ease-in-out infinite SampleTranslation;

 transform-box: content-box;

 width: 40px;

 border: 50px solid #cca6bf;

 padding: 30px;

 
}





@keyframes SampleTranslation {


  0% { transform: translate(0%); }

  100% { transform: translate(100%); }

  
}

HTMLの要素に適用した場合、“fill-box”の使用値は“content-box”となるので“content-box”を指定した場合と同じ結果になります。



.transform-fill-box {


 animation: 2s ease-in-out infinite SampleTranslation;

 transform-box: fill-box;

 width: 40px;

 border: 50px solid #cca6bf;

 padding: 30px;

 
}





@keyframes SampleTranslation {


  0% { transform: translate(0%); }

  100% { transform: translate(100%); }

  
}

＃

ボーダー・ボックスを基準にする



.transform-border-box {


 animation: 2s ease-in-out infinite SampleTranslation;

 transform-box: border-box;

 width: 40px;

 border: 50px solid #cca6bf;

 padding: 30px;

 
}





@keyframes SampleTranslation {


  0% { transform: translate(0%); }

  100% { transform: translate(100%); }

  
}

HTMLの要素に適用した場合、“stroke-box”の使用値は“border-box”となるので“border-box”を指定した場合と同じ結果になります。



.transform-stroke-box {


 animation: 2s ease-in-out infinite SampleTranslation;

 transform-box: stroke-box;

 width: 40px;

 border: 50px solid #cca6bf;

 padding: 30px;

 
}





@keyframes SampleTranslation {


  0% { transform: translate(0%); }

  100% { transform: translate(100%); }

  
}

同様に、HTMLの要素に適用した場合、“view-box”の使用値は“border-box”となるので“border-box”を指定した場合と同じ結果になります。



.transform-view-box {


 animation: 2s ease-in-out infinite SampleTranslation;

 transform-box: view-box;

 width: 40px;

 border: 50px solid #cca6bf;

 padding: 30px;

 
}





@keyframes SampleTranslation {


  0% { transform: translate(0%); }

  100% { transform: translate(100%); }

  
}