此页面由社区从英文翻译而来。了解更多并加入 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月.
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> <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()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）
默认的转换原点是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>，<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-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 |
|---|---|
| html css |
| html css |
| html css |
| html css |
| html css |
| html css |
| html css |
| html css |
| html css |
| html css |
规范
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-origin-property |