transform-origin は変形させる要素の起点座標を指定します。

指定方法

起点の位置となるx、y、z座標を半角スペースで区切って指定します。

transform-origin:x座標 y座標 z座標;

値

left: 起点のx座標を左端(0%)にします。(x座標の指定に有効)
right: 起点のx座標を右端(100%)にします。(x座標の指定に有効)
top: 起点のy座標を上端(0%)にします。(y座標の指定に有効)
bottom: 起点のy座標を下端(100%)にします。(y座標の指定に有効)
center: 起点のx、y座標を中央(50%)にします。
任意の単位: px や % などの単位で指定可能。

% を指定する場合、要素に対する割合になります。pxの場合は、絶対値になります。

サンプル

デフォルト

transform-origin を指定しない場合、起点は要素の中心になります。以下はtransform-originを指定しない場合と指定する場合の動きを確認します。

HTML

<div class='test-box-01'></div>
<div class='test-box-02'></div>

CSS

.test-box-01 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-left: 300px;
  margin-top: 100px;
}

.test-box-01:active {
  transform-origin:50% 50%;
  transform: scaleX(2);
}

.test-box-02 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-left: 300px;
  margin-top: 100px;
}

.test-box-02:active {
  transform: scaleX(2);
}

結果

どちらも要素を押下すると中央を起点とし要素が横に伸びます。

X方向

X方向に動くように指定します。

HTML

<div class='test-box-03'></div>
<div class='test-box-04'></div>

CSS

.test-box-03 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-left: 300px;
  margin-top: 100px;
}

.test-box-03:active {
  transform-origin: 0px;
  transform: scaleX(2);
}

.test-box-04 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-left: 300px;
  margin-top: 100px;
}

.test-box-04:active {
  transform-origin: 20px;
  transform: scaleX(2);
}

結果

一つ目は、起点のx座標を0pxに指定しているので、左端から右へ伸びます。
一つ目は、起点のx座標を20pxに指定しているので、20px右を起点として左右へ伸びます。

最後に

特にありません。