transform-origin
2024年07月01日
一、认识
transform-origin 属性让你更改一个元素变形的原点。转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）
二、语法
transform-origin =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?
<length-percentage> =
<length> |
<percentage>
/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;
/* x-offset | y-offset */
transform-origin: 3cm 2px;
/* x-offset-keyword | y-offset */
transform-origin: left 2px;
/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;
/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;
/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;
/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;
/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;
/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;
/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;
-
一个值: 必须是
<length>，<percentage>，或left,center,right,top,bottom关键字中的一个。 -
两个值:
-
其中一个必须是
<length>，<percentage>，或left,center,right关键字中的一个。 -
另一个必须是
<length>，<percentage>，或top,center,bottom关键字中的一个
-
-
三个值:
-
前两个值和只有两个值时的用法相同
-
第三个值必须是
<length>。它始终代表 Z 轴偏移量。
-
三、取值
-
x-offset: 定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。 -
offset-keyword:left，right，top，bottom或center中之一，定义相对应的变形中心偏移。 -
y-offset: 定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。 -
x-offset-keyword:left，right或center中之一，定义相对应的变形中心偏移。 -
y-offset-keyword:top，bottom或center中之一，定义相对应的变形中心偏移。 -
z-offset: 定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。
关键字是方便的简写方法，等同于以下<percentage>值
left 0%
center 50%
right 100%
top 0%
bottom 100%