We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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  

浏览器兼容

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes -webkit-

12

12 -webkit-

16

3.5 -moz-

49 -webkit-

44 -webkit- 1

10

9 -ms-

12.1

10.5 -o-

3.1 -webkit-
Three-value syntax Yes ?109 No Yes
Support in SVG Yes ?

432

41 —?2 3

No Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ?

Yes

Yes -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

? ? ?
Three-value syntax ? ? ? ? No ? ?
Support in SVG ? ? ? ? ? ? ?

1. 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.

2. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

3. 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.

参见

文档标签和贡献者

最后编辑者: zhangchen,