此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
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 2015年9月.
CSS 內的**transform-origin**屬性可以設定元素變化的原點。
嘗試一下
transform-origin: center;transform-origin: top left;transform-origin: 50px 50px;/* 3D rotation with z-axis origin */transform-origin: bottom right 60px;<section> <div> <div>Rotate me!</div> <img alt="" src="/shared-assets/images/examples/crosshair.svg" width="24px" /> <div></div> </div></section>@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(30deg); }}@keyframes rotate3d { from { transform: rotate3d(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: #000000; 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;}"use strict";window.addEventListener("load", () => { function update() { const selected = document.querySelector(".selected"); /* Restart the animation https://developer.mozilla.org/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 crosshair = document.getElementById("crosshair"); const el = document.getElementById("example-element"); const observer = new MutationObserver(() => { update(); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); update(); crosshair.style.opacity = "1";});變化原點指的是應用變化的點。舉例來說，rotate()函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)
語法
/* 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 屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的初始值。
If two or more values are defined and either no value is a keyword, or the only used keyword iscenter, then the first value represents the horizontal offset and the second represents the vertical offset.
One-value syntax:
- The value must be a
<length>, a<percentage>, or one of the keywordsleft,center,right,toporbottom.
- The value must be a
Two-value syntax:
- One value must be a
<length>, a<percentage>, or one of the keywordsleft,center, andright. - The other value must be a
<length>, a<percentage>, or one of the keywordstop,center, andbottom.
- One value must be a
Three-value syntax:
- The first two values are the same as for the two-value syntax.
- The third value must be a
<length>. It always represents the Z offset.
Values
- x-offset
Is a
<length>or a<percentage>describing how far from the left edge of the box the origin of the transform is set.- offset-keyword
Is one of the
left,right,top,bottom, orcenterkeyword describing the corresponding offset.- y-offset
Is a
<length>or a<percentage>describing how far from the top edge of the box the origin of the transform is set.- x-offset-keyword
Is one of the
left,right, orcenterkeyword describing how far from the left edge of the box the origin of the transform is set.- y-offset-keyword
Is one of the
top,bottom, orcenterkeyword describing how far from the top edge of the box the origin of the transform is set.- z-offset
Is a
<length>(and never a<percentage>which would make the statement invalid) describing how far from the user eye the z=0 origin is set.
The keywords are convenience shorthands and match the following<percentage> values:
| Keyword | Value |
|---|---|
left | 0% |
center | 50% |
right | 100% |
top | 0% |
bottom | 100% |
Formal syntax
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>
範例
<div> <div> <div> </div> <div> </div> </div> <pre>transform: none;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: rotate(30deg);</pre > <div> <div> </div> <div> </div> </div> <pre>transform: rotate(30deg);transform-origin: 0 0;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: rotate(30deg);transform-origin: 100% 100%;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: rotate(30deg);transform-origin: -1em -3em;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: scale(1.7);</pre > <div> <div> </div> <div> </div> </div> <pre>transform: scale(1.7);transform-origin: 0 0;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: scale(1.7);transform-origin: 100% -30%;</pre > <div> <div> </div> <div> </div> </div> <pre>transform: skewX(50deg);transform-origin: 100% -30%;</pre > <div> <div> </div> <div> </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%;}規範
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-origin-property |
| 預設值 | 50% 50% 0 |
|---|---|
| 適用於 | 可變形元素 |
| 繼承與否 | 否 |
| 百分比 | 指邊界框的尺寸 |
| Computed value | for<length> the absolute value, otherwise a percentage |
| 動畫類型 | 包含長度、百分比或 calc 的簡單列表 |