Skip to main content

TransformOrigin

note

3D transforms are available in beta. The API is subject to change.

The point around which a node's 3D transform is applied, corresponding to the X/Y values of CSS transform-origin. Set with transformOrigin. Defaults to 50% 50%: { x: { unit: 'PERCENT', value: 50 }, y: { unit: 'PERCENT', value: 50 } }.

Changing the origin can move the rendered node. Each axis has its own unit: PERCENT corresponds to CSS %, and PIXELS to px. See transformOrigin for an example of rotating around a layer's left edge.

TransformOrigin​

x: TransformOriginAxis [readonly]

The horizontal origin, measured from the node's left edge.

y: TransformOriginAxis [readonly]

The vertical origin, measured from the node's top edge.

TransformOriginAxis​

The { unit, value } shape used for each axis.

unit: 'PERCENT' | 'PIXELS' [readonly]

The unit for this axis. "PERCENT" is relative to the node's width (x) or height (y), with 50 at the center. "PIXELS" is an offset from the node's top-left corner.

value: number [readonly]

The finite offset in the specified unit. Values outside the node's bounds are allowed.