转载请说明出处，原文地址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之前，都是以元素的中心 ...