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 |
初始值 | 50% 50% 0 |
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
Percentages | refer to the size of bounding box |
适用媒体 | visual |
计算值 | for length the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
正规顺序 | One or two values, with length made absolute and keywords translated to percentages |
浏览器兼容
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-origin | Chrome
Full support
36
| Edge
Full support
12
| Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
23
| Safari
Full support
9
| WebView Android
Full support
37
| Chrome Android
Full support
36
| Firefox Android
Full support
16
| Opera Android
Full support
24
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
3.0
|
Support in SVG | Chrome Full support 19 | Edge Full support 17 | Firefox
Full support
43
| IE No support No | Opera Full support 15 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 25 | Firefox Android
Full support
43
| Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.5 |
Three-value syntax | Chrome Full support 12 | Edge Full support 12 | Firefox Full support 10 | IE Full support 9 | Opera Full support 15 | Safari Full support 4.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 10 | Opera Android Full support 14 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- 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.