transform-origin

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

transform-origin 是一個 CSS 屬性，用於設定元素變形的起點。

試一試

transform-origin: center;

transform-origin: top left;

transform-origin: 50px 50px;

/* 3D rotation with z-axis origin */
transform-origin: bottom right 60px;

<section id="default-example">
  <div id="example-container">
    <div id="example-element">Rotate me!</div>
    <img
      alt=""
      id="crosshair"
      src="/shared-assets/images/examples/crosshair.svg"
      width="24px" />
    <div id="static-element"></div>
  </div>
</section>

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(30deg);
  }
}

@keyframes rotate3d {
  from {
    transform: rotate3d(0, 0, 0, 0);
  }

  to {
    transform: rotate3d(1, 2, 0, 60deg);
  }
}

#example-container {
  width: 160px;
  height: 160px;
  position: relative;
}

#example-element {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: #f7ebee;
  color: black;
  font-size: 1.2rem;
  text-transform: uppercase;
}

#example-element.rotate {
  animation: rotate 1s forwards;
}

#example-element.rotate3d {
  animation: rotate3d 1s forwards;
}

#crosshair {
  width: 24px;
  height: 24px;
  opacity: 0;
  position: absolute;
}

#static-element {
  width: 100%;
  height: 100%;
  position: absolute;
  border: dotted 3px #ff1100;
}

const crosshair = document.getElementById("crosshair");
const el = document.getElementById("example-element");

function update() {
  const selected = document.querySelector(".selected");

  /* Restart the animation
           https://mdn.club.tw/en-US/docs/Web/CSS/CSS_Animations/Tips */
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className =
        el.style.transformOrigin.split(" ")[2] === "60px"
          ? "rotate3d"
          : "rotate";
    });
  });

  const transformOrigin = getComputedStyle(el).transformOrigin;
  const pos = transformOrigin.split(/\s+/);
  crosshair.style.left = `calc(${pos[0]} - 12px)`;
  crosshair.style.top = `calc(${pos[1]} - 12px)`;
}

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();
crosshair.style.opacity = "1";

變形起點是應用變形的點。例如，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 偏移量: 是一個 <length> 或 <percentage>，描述了變形原點距離盒子左邊緣的距離。
偏移關鍵字: 是 left、right、top、bottom 或 center 關鍵字之一，描述了相應的偏移量。
y 偏移量: 是一個 <length> 或 <percentage>，描述了變形原點距離盒子頂部邊緣的距離。
x 偏移量關鍵字: 是 left、right 或 center 關鍵字之一，描述了變形原點距離盒子左邊緣的距離。
y 偏移量關鍵字: 是 top、bottom 或 center 關鍵字之一，描述了變形原點距離盒子頂部邊緣的距離。
z 偏移量: 是一個 <length>（絕不能是 <percentage>，否則會使宣告無效），描述了 z=0 原點距離使用者眼睛的距離。

關鍵字是便捷的簡寫，與以下 <percentage> 值匹配

關鍵字	值
`left`	`0%`
`center`	`50%`
`right`	`100%`
`top`	`0%`
`bottom`	`100%`

正式定義

初始值	`50% 50% 0`
應用於	可變換元素
繼承性	否
百分比	指邊框的尺寸
計算值	對於 `<length>` 則是絕對值，否則為百分比
動畫型別	長度、百分比或計算值的簡單列表

注意： 除了根 <svg> 元素和直接作為 foreignObject 子元素的 <svg> 元素（其 transform-origin 為 50% 50%，與其他 CSS 元素一樣）之外，所有 SVG 元素的 transform-origin 初始值均為 0 0。有關更多資訊，請參閱 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 變換模組級別 1 # transform-origin 屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者於 2025 年 10 月 1 日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題