今天看到了 transform-origin 這個屬性，不知道它的作用，遂總結整理一下。
transform-origin CSS 屬性可以讓元素更改一個元素變形的原點，舉個很簡單的例子：
<style>
.outer {
border: 1px solid red;
margin-top: 50px;
}
.square {
width: 100px;
height: 100px;
background-color: #aaaaaa;
color: #fff;
transform: rotate(45deg);
}
</style>
<body>
<div class="outer">
<div class="square">Square</div>
</div>
</body>
上面的例子就是一個旋轉的正方形，可以看到默認是以正方形的中心點進行旋轉。
而 transform-origin 就是改變其變形原點，也就是 transform 的中心，例如我將 square 設置爲以左上角頂點爲旋轉原點。
添加一行 CSS 代碼如下：
transform-origin: top left;
效果如下：
更多的屬性可以查看 MDN 的文檔。