【CSS】transformの起点を指定するtransform-originプロパティ

こばゆた

前回、前々回やったtransformプロパティの補足的なお話です

【CSS】要素を変化させるtransformプロパティ-前編-

...

kbyt-programming.com

2021年11月30日

【CSS】要素を変化させるtransformプロパティ-後編-

...

kbyt-programming.com

2021年11月30日

1.transform-origin

transform-originとはtransformプロパティの起点を指定する事ができるプロパティです。

何も指定していないデフォルトの状態だと中心を起点にしています。

<div class="boxA box">・</div>
<div class="boxB box">・</div>
<div class="boxC box">・</div> 

.box{
  width: 100px;
  height: 100px;
}

.boxA:hover{
   transform: rotate(15deg);
}

.boxB:hover{
   transform: skewX(30deg);
}

.boxC:hover{
   transform: scale(1.2, 0.5);
}

transformプロパティの中には”translate”,”rotate”,”scale”,”skew”がありましたが今回は上の３つの変化を見て行きます。

ちなみに”translate”は基準を変えても平行に移動するだけなので、transform-originを指定しても意味がないため省略します。

2.transform-originの指定の仕方

2-1.値をキーワードで指定する

セレクター{
  transform-origin: 値;
}

.box{
  transform-origin: center;
}

2-2.値を複数指定する

値を複数選択することもできます。

.box{
  transform-origin: top left;
}

2-3.値を数値で指定する

“top”などのキーワードだけでなく”%”,”px”でも指定できます。

3.まとめ

セレクター{
  transform-origin: 値;
}