transform-origin

基线广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 9 月.

transform-origin CSS 属性设置元素变换的原点。

试一试

变换原点是应用变换的点。例如，rotate() 函数的变换原点是旋转中心。

实际上，此属性围绕元素的其他变换包装了一对平移。第一次平移将变换原点移动到真正的原点，位于 $(0, 0)$ 。然后应用其他变换，并且由于变换原点位于 $(0, 0)$ ，因此这些变换围绕变换原点进行。最后，应用相反的平移，将变换原点移回其原始位置。因此，此定义

css

transform-origin: -100% 50%;
transform: rotate(45deg);

产生的变换与以下变换相同：

css

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

从右到左读取，translate(100%, -50%) 是将变换原点移到真正原点的平移，rotate(45deg) 是原始变换，而 translate(-100%, 50%) 是将变换原点恢复到其原始位置的平移。

默认情况下，变换的原点为 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: revert;
transform-origin: revert-layer;
transform-origin: unset;

可以使用一个、两个或三个值指定 transform-origin 属性，其中每个值代表一个偏移量。未明确定义的偏移量将重置为其相应的初始值。

如果定义了单个<length> 或<percentage> 值，则它表示水平偏移量。

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

单值语法
- 该值必须是<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 偏移量: 是一个 <length>（绝不是 <percentage>，因为它会使语句无效），描述了 z=0 原点距用户眼睛的距离。

这些关键字是方便的简写，与以下 <percentage> 值匹配

关键字	值
`left`	`0%`
`center`	`50%`
`right`	`100%`
`top`	`0%`
`bottom`	`100%`

正式定义

初始值	`50% 50% 0`
应用于	可变换元素
继承	否
百分比	指的是边界框的大小
计算值	对于 `<length>`，为绝对值，否则为百分比
动画类型	长度、百分比或 calc 的简单列表

注意：对于所有 SVG 元素，transform-origin 的初始值为 0 0，但根 <svg> 元素和作为 foreignObject 的直接子元素的 <svg> 元素除外，它们的 transform-origin 为 50% 50%，与其他 CSS 元素相同。有关更多信息，请参阅 SVG transform-origin 属性。

正式语法

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>

示例

各种变换值的演示

此示例显示了为各种变换函数选择不同的 transform-origin 值的效果。

<div class="container">
  <div class="example">
    <div class="box box1">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: none;
  </pre>

  <div class="example">
    <div class="box box2">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
  </pre>

  <div class="example">
    <div class="box box3">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box4">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
  </pre>

  <div class="example">
    <div class="box box5">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
  </pre>

  <div class="example">
    <div class="box box6">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
  </pre>

  <div class="example">
    <div class="box box7">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box8">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box9">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box10">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
  </pre>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}

规范

规范
CSS Transforms 模块级别 1 # transform-origin 属性

浏览器兼容性

BCD 表格仅在浏览器中加载