共计 1880 个字符，预计需要花费 5 分钟才能阅读完成。
transform 是 CSS3 里的变换属性，常用的有 translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放) 方法。而 transform-origin 并不是 transform 的属性值，其具有独立的语法，但值得注意的是，transform-origin 必须配合 transform 来使用，这个从名字也可以看得出来，就是给 transform 设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform 可以设置九个位置的值，水平方向有 left | center | right 三个值，垂直方向也有三个，分别是 top | center |bottom，故一共有九个。
语法：
transform-origin：[<percentage> | <length> | left | center① | right] [<percentage> | <length> | top | center② | bottom]?
默认值：50% 50%，效果等同于 center center
适用于：所有块级元素及某些内联元素
取值：
<percentage>：用百分比指定坐标值。可以为负值。
<length>：用长度值指定坐标值。可以为负值。
left：指定原点的横坐标为 left
center①：指定原点的横坐标为 center
right：指定原点的横坐标为 right
top：指定原点的纵坐标为 top
center②：指定原点的纵坐标为 center
bottom：指定原点的纵坐标为 bottom
说明：
设置或检索对象以某个原点进行转换。
该属性提供 2 个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为 50%。
对应的脚本特性为 transformOrigin。
兼容性：
transform 属性
默认情况，变形的原点在元素的中心点，或者是元素 X 轴和 Y 轴的 50% 处，如下图所示：
我们没有使用 transform-origin 改变元素原点位置的情况下，CSS 变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用 transform-origin 来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
看上去 transform-origin 取值与 background-position 取值类似。为了方便记忆，可以把关键词和百分比值对比起来记：
top = top center = center top = 50% 0
right = right center = center right = 100% 或 (100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0 或 (0 50%)
center = center center = 50% 或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
为了让大家能一眼看明白，下面截图以 transform 中的旋转 rotate() 为例，并 transform-origin 取值不一样时的效果：transform-origin 取值为 center（或 center center 或 50% 或 50% 50%）：
transform-origin 取值为 top（或 top center 或 center top 或 50% 0）：
transform-origin 取值为 right(或 right center 或 center right 或 100% 或 100% 50%)：
transform-origin 取值为 bottom(或 bottom center 或 center bottom 或 50% 100%)：
transform-origin 取值为 left(或 left center 或 center left 或 0 或 0 50%):
transform-origin 取值为 top left(或 left top 或 0 0)：
transform-origin 取值为 right top（或 top right 或 100% 0）：
transform-origin 取值为 bottom right（或 right bottom 或 100% 100%）:
transform-origin 取值为 left bottom（或 bottom left 或 0 100%）:
参考文章：http://www.w3cplus.com/css3/t…
