CSS 属性 transform-origin 形变原点

Docs

transform-origin - CSS：层叠样式表 | MDN (mozilla.org)

CSS Transforms Module Level 1 (w3c.github.io)

transform-origin：形变的原点
比如在进行 scale 缩放或者 rotate 旋转时，都会有一个原点。
一个值：
设置 x 轴的原点
两个值：
设置 x 轴和 y 轴的原点
必须是 <length>，<percentage>，或 left, center, right, top, bottom 关键字中的一个
left, center, right, top, bottom 关键字
length：从左上角开始计算
百分比：参考元素本身大小

transform-origin CSS 属性让你更改一个元素变形的原点。

转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）

默认的转换原点是 center

transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

一个值：<length>，<percentage>，
- 必须是 <length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
两个值：
- 其中一个必须是 <length>，<percentage>，或left, center, right关键字中的一个。
- 另一个必须是 <length>，<percentage>，或top, center, bottom关键字中的一个。
三个值：
- 前两个值和只有两个值时的用法相同。
- 第三个值必须是 <length>。它始终代表 Z 轴偏移量。

关键字是方便的简写方法，等同于以下 <percentage> 值：

keyword	value
`left`	`0%`
`center`	`50%`
`right`	`100%`
`top`	`0%`
`bottom`	`100%`

值

/* 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;

语法

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>

值​

语法​

值

语法