transform-origin#

#Introduction

The transform-origin CSS property sets the origin for an element's transformations.

#Examples

css-apisrc/transform-origin/App.tsx

Preview

#Syntax

/* 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;

#Values

The value of the transform-origin can be one or two. The first value represents x-offset, the second value represents y-offset, separated by a space.

#x-offset

The value of x-offset can be length <length>, percentage <x-percentage>, keyword <x-offset-keyword>

• length Length value, the unit is px,rem,rpx, etc.

• x-percentage Percentage relative to parent ViewWidth.

• x-offset-keyword

#y-offset

The value of y-offset can be length <length>, percentage <y-percentage>, keyword <y-offset-keyword>

• length Length value, the unit is px,rem,rpx, etc.

• y-percentage Percentage relative to parent ViewHeight.

• y-offset-keyword

#Formal definition

#Difference from W3C

• Transform-origin is not supported for z-axis

#Note

• The first value of transform-origin always means x-offset, the second value always means y-offset, please do not write inverse.

#Compatibility