transform-origin

Posted 2020-08-24 coldfishdt

transform-origin：改变原点中心位置

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，transform-origin并不是transform中的属性值，他具有自己的语法。但是该属性只有在设置了transform属性的时候才能起作用。

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，如下图所示：

在没有使用transform-origin改变元素中心点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

如果想在不同的位置对元素进行这些操作，那么就可以使用transform-origin来对元素进行基点位置改变，使元素中心点不在是中心位置，达到需要的中心点位置。

transform-origin(X,Y):

　　transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，

　　　　　　也可以是left,center,right水平方向取值，对应的百分值为left=0%;center=50%;right=100%，

　　　　　　或者 top,center,bottom垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变

　　　　　　

• top left = left top = 0 0
• left = left center = center left = 0或(0 50%)
• bottom left = left bottom = 0 100%
• top = top center = center top = 50% 0
• center = center center = 50%或（50% 50%）
• bottom = bottom center = center bottom = 50% 100%
• right top = top right = 100% 0
• right = right center = center right = 100%或(100% 50%)
• bottom right = right bottom = 100% 100%

　　　　　　left center = 0 50%

　　　　　　left bottom = 0 100%

　　　　　　top center = 50% 0

　　　　　　center | center center = 50% 50%（默认值）

　　　　　　center bottom = 50% 100%

　　　　　　right top = 100% 0

　　　　　　right center = 100% 50%

                 right bottom = 100% 100%