transform-origin

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
初始值50% 50% 0
适用元素transformable elements
是否是继承属性
Percentagesrefer to the size of bounding box
适用媒体visual
计算值for length the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc
正规顺序One or two values, with length made absolute and keywords translated to percentages

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
transform-originChrome Full support 36
Full support 36
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 3.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with 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 Implemented with the vendor prefix: -ms-
Opera Full support 23
Full support 23
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
Full support 10.5
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 37
Full support 37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 36
Full support 36
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with 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 Full support 24
Full support 24
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 9
Full support 9
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 3.0
Full support 3.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Support in SVG
Experimental
Chrome Full support 19Edge Full support 17Firefox 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 — 43
Notes Disabled
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Disabled From version 41 until version 43 (exclusive): 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 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android 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 — 43
Notes Disabled
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
Three-value syntaxChrome Full support 12Edge Full support 12Firefox Full support 10IE Full support 9Opera Full support 15Safari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 3.2Samsung 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.

参见