transform-origin

transform-origin能够改变一个元素（块级元素与部分行内元素）变形的原点。该属性必须配合transform属性使用。

 山大

 

/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;

/* 双值语法 */
/* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 3cm 2px;   /* x-offset y-offset */
transform-origin: 2px left;  /* y-offset x-offset-keyword */
transform-origin: left 2px;  /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */

/* 三值语法 */
transform-origin: 2px 30% 10px;     /* x-offset y-offset z-offset */
transform-origin: 2px left 10px;    /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px;    /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */　　

举例：

rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，而后再用这个属性的值把元素translate回去)。

下图中黑色方框为未进行旋转处理的原图，红色方框为旋转后的方框。以原图为对比来观察translate-origin属性是如何使用的。

transform-origin: 0 0;即旋转原点为原图片的原点（方形的左上角点）

transform-origin: top right; // 原点为方框的右上角

transform-origin: left 100%; / transform-origin: left 200px; // 原点为方框的左下角

也就是说先以方框left边界为y轴，再将原点沿着y轴向下偏移200px。