transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

尝试一下

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

默认的转换原点是 center

语法

css
/* 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属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

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

  • 一个值：
  • 两个值：
  • 三个值：
    • 前两个值和只有两个值时的用法相同。
    • 第三个值必须是<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>值：

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

形式语法

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>

示例

Code Sample

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -1em -3em;

transform: scale(1.7);

transform: scale(1.7);
transform-origin: 0 0;

transform: scale(1.7);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

规范

Specification
CSS Transforms Module Level 1
# transform-origin-property
初始值50% 50% 0
适用元素可变换元素
是否是继承属性否
Percentagesrefer to the size of bounding box
计算值对于 length 则为绝对值，否则为百分比值
动画类型simple list of length, percentage, or calc

浏览器兼容性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见