变换原点 | transform-origin

transform-origin属性允许您修改元素转换的原点。例如，rotate()函数的转换原点是旋转中心。（首先通过属性的否定值翻译元素，然后应用元素的变换，然后通过属性值进行翻译来应用此属性。）

/* 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属性可以使用一个，两个或三个值来指定。

• 单值语法：该值必须是以下任何一个：
  • 一个 <length>
  • 一个 <percentage>
  • 关键字left，center，right，top，bottom
• 双值语法：
  • 一个值必须是一个<length>，或者<percentage>，或者关键字之一left，center，right
  • 其他值必须是一个<length>，或一个<percentage>，或其中一个关键字top，center，bottom
• 三值语法：
  • 前两个值与双值语法相同
  • 第三个值必须是一个 <length>

值

_x-offset_Is 一个<length>或一个<percentage>描述如何远离框的左边缘的原点的变换是 set._offset-keyword_Is 的一个left，right，top，bottom或center关键字描述所述相应 offset._y-offset_Is 一个<length>或一个<percentage>描述如何从远盒子的顶部边缘变换的原点是的 set._x 偏移 -keyword_Is 一个left，right或center关键字描述所述变换的原点从框的左边缘多远是 set._y 偏移 -keyword_Is 之一的top，bottom或center关键字描述所述变换的原点从箱的顶部边缘多远是 set._z-offset_Is 一个<length>（并且从不<percentage> 这将使该陈述无效）描述离用户眼多远 z = 0 原点设置。

关键字是方便的快捷方式，并且匹配以下<percentage>值：

形式语法

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage>

示例

有关示例，请参阅使用 CSS 转换。

现场示例

规范

浏览器兼容性