transform-origin CSS属性让你更改一个元素变形的原点。

转换起点是应用转换的点。例如,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>,或 leftcenterrighttopbottom关键字中的一个。
  • 两个值:
  • 三个值:
    • 前两个值和只有两个值时的用法相同。
    • 第三个值必须是<length>。它始终代表Z轴偏移量。

x-offset
定义变形中心距离盒模型的左侧的<length><percentage>偏移值。
offset-keyword
leftright,topbottomcenter中之一,定义相对应的变形中心偏移。
y-offset
定义变形中心距离盒模型的顶的<length><percentage>偏移值。
x-offset-keyword
leftrightcenter中之一,定义相对应的变形中心偏移。
y-offset-keyword
topbottomcenter中之一,定义相对应的变形中心偏移。
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

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -1em -3em;

transform: scale(1.7);

transform: scale(1.7);
transform-origin: 0 0;

transform: scale(1.7);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

规范

Specification Status Comment
CSS Transforms Level 1
transform-origin
Working Draft  

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 3.5
Prefixed
Prefixed Requires the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Full support 10
Full support 9
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera Full support 12.1
Full support 12.1
Full support 10.5
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari Full support 3.1
Prefixed
Full support 3.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android ? Chrome Android ? Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Three-value syntaxChrome Full support YesEdge ? Firefox Full support 10IE Full support 9Opera No support NoSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
Support in SVG
Experimental
Chrome Full support YesEdge ? Firefox Full support 43
Notes
Full support 43
Notes
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
No support 41 — ?
Notes Disabled
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Disabled From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? 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.

参见

文档标签和贡献者

最后编辑者: zhangchen,