因為搜遍網上也沒有一篇文章把transform-origin講得很清楚的，所以自己總結了一下
transform-origin是變形原點，也就是該元素圍繞着那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用（注意元素位移translate()始終是依元素中心點進行位移）；
不設置的情況下默認是以元素中心為原點進行變形。
設置變形原點的語法為：transform-origin：X Y；（3D變換下還有個Z軸，這里不討論）
X可以是%、em、px、left、center、right；Y可以是%、em、px、top、center、bottom；
這些值所在坐標系都是以元素左上角為原點，水平向右為X軸，垂直向下為Y軸，因此left top實際上就是元素左上角也就是零點，left bottm則是元素左下角，以此類推。
下面用圖片表示一下變形原點在不同設置下具體在哪個位置：
（1）默認情況：
默認值是元素中心，同時元素中心也可以表示為 transform-origin：50% 50%；或transform-origin：center center；
（2）左上角：
要使元素圍繞元素的左上角進行變形，則設置transform-origin：0% 0%；或transform-origin：left top；
（3）右上角：
要使元素圍繞元素的右上角進行變形，則設置transform-origin：100% 0%；或transform-origin：right top；
（4）右下角：
要使元素圍繞元素的右下角進行變形，則設置transform-origin：100% 100%；或transform-origin：right bottom；
（5）左下角：
要使元素圍繞元素的左上角進行變形，則設置transform-origin：0% 100%；或transform-origin：left bottom；
（6）自定義：
如果想要讓變形原點位於元素之外，可以直接設置坐標值transform-origin：x y；單位可以是%、em、px
