轉載請說明出處，原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(變形)和transform-origin(變形原點) transform(變形 ...

變形--原點 transform-origin 任何一個元素都有一個中心點，默認情況之下，其中心點是居於元素X軸和Y軸的50%處。如下圖所示： 在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素 ...

因為搜遍網上也沒有一篇文章把transform-origin講得很清楚的，所以自己總結了一下 transform-origin是變形原點，也就是該元素圍繞着那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用（注意元素位移translate()始終是依元素中心點進行位移 ...

...

一. transform是改變的意思，在css中主要包括旋轉，移動，縮放，扭曲，矩陣變形。 二. 旋轉rotate rotate(<angle>) ：通過指定的角度參數對原元素指定一個2D 旋轉，需先有transform-origin屬性的定義。transform-origin ...

前面的話 　　CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更復雜的效果。變形transform可以實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形函數和transform-origin變形 ...

一、transform-origin屬性介紹 transform-origin屬性表示在對元素進行變換的時候，設置圍繞哪個點進行變化的。默認情況，變換的原點在元素的中心點，即是元素X軸和Y軸的50%處，如下圖所示： 我們沒有使用transform-origin改變元素原點 ...

transform-origin的作用： 　　transform-origin是更改一個元素變形原點，原點就是元素繞着旋轉或變形的點，像transform屬性的rotate、translate、scale、skew、matrix 再沒有使用transform-origin之前，都是以元素的中心 ...