【20190328】CSS-transform-origin（變形原點）解析

由於搜遍網上也沒有一篇文章把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