transform-origin CSS属性让你更改一个元素变形的原点。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的负值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）
语法
/* 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% |
正式语法
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where
<length-percentage> = <length> | <percentage>
示例
| Code | Sample |
|---|---|
|
|
<div class="box1"> </div>
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
}
|
|
|
<div class="box2"> </div>
.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box3"> </div>
.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box4"> </div>
.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box5"> </div>
.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -1em -3em;
-webkit-transform-origin: -1em -3em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
|
|
|
<div class="box6"> </div>
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box7"> </div>
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box8"> </div>
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(
|
|
|
<div class="box9"> </div>
.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
-webkit-transform: skewX(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
|
|
|
<div class="box10"> </div>
.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
}
|
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Transforms Level 1 transform-origin |
Working Draft |
浏览器兼容
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome
Full support
Yes
| Edge
Full support
12
| Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
3.1
| WebView Android ? | Chrome Android ? | Edge Mobile
Full support
Yes
| Firefox Android
Full support
16
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
| Three-value syntax | Chrome Full support Yes | Edge ? | Firefox Full support 10 | IE Full support 9 | Opera No support No | Safari Full support Yes | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
| Support in SVG | Chrome Full support Yes | Edge ? | Firefox
Full support
43
| IE No support No | Opera Full support Yes | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.