任何一個(gè)元素都有一個(gè)中心點(diǎn)，默認(rèn)情況之下，其中心點(diǎn)是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變元素原點(diǎn)位置的情況下，CSS變形進(jìn)行的旋轉(zhuǎn)、位移、縮放，扭曲等操作都是以元素自己中心位置進(jìn)行變形。但很多時(shí)候，我們可以通過transform-origin來對元素進(jìn)行原點(diǎn)位置改變，使元素原點(diǎn)不在元素的中心位置，以達(dá)到需要的原點(diǎn)位置。

transform-origin取值和元素設(shè)置背景中的background-position取值類似，如下表所示：

示例展示：

通過transform-origin改變元素原點(diǎn)到左上角，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度。

HTML代碼：

<div class="wrapper">
  <div>原點(diǎn)在默認(rèn)位置處</div>
</div>
<div class="wrapper transform-origin">
  <div>原點(diǎn)重置到左上角</div>
</div>

CSS代碼：

.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

演示結(jié)果：