此页面由社区从英文翻译而来。了解更多并加入 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 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);
}
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 |
浏览器兼容性
Loading...