#transform-origin

#介绍

transform-origin CSS 属性用于更改一个元件进行 transform 变换的原点。 例如，rotate 变换的 transform-origin 是旋转中心，scale 变换的 transform-origin 是缩放中心。

#使用示例

css-apisrc/transform-origin/App.tsx

预览

#语法

/* x-offset | default */
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;

/* x-offset | y-offset */
transform-origin: 2px 30%;

/* x-offset-keyword | y-offset */
transform-origin: left 5px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right bottom;

transform-origin 属性的值可以为一个或两个。第一个值表示 x-offset，第二个值表示 y-offset，两者之间使用空格分隔。

#取值

#x-offset

x-offset 的值可以为长度 <length>、百分比 <x-percentage>、关键字 <x-offset-keyword>

• length 长度值，单位为常见的 px,rem,rpx 等。

• x-percentage 相对于父亲 View 宽度 Width 的百分比。

• x-offset-keyword

#y-offset

y-offset 的值可以为长度 <length>、百分比 <y-percentage>、关键字 <y-offset-keyword>

• length 长度值，单位为常见的 px,rem,rpx 等。

• y-percentage 相对于父亲 View 高度 Height 的百分比。

• y-offset-keyword

#形式定义

#与 Web 的区别

• 不支持对 z 轴设置 transform-origin

#注意事项

• transform-origin 的第一个值始终表示 x-offset，第二个值始终表示 y-offset，请不要写反。

#兼容性