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

サンプル

HTML

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

CSS

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

.test-box-01:hover {
  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:hover {
  transform: scaleX(2);
}

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

.test-box-03:hover {
  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:hover {
  transform-origin: 20px;
  transform: scaleX(2);
}