CSS辞典 transform-boxプロパティ解説

css辞典 CSS辞典
この記事は約7分で読めます。

変形の参照ボックスを参照する「transform-boxプロパティ」の使用方法を記載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値 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>
実行結果

transform-box: content-box;

transform-box: fill-box;

コメント

タイトルとURLをコピーしました