Transform3d

note

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

The 3D transform applied to a node, set with transform3d.

type Transform3d =
  | { readonly type: 'NONE' }
  | {
      readonly type: 'FIXED_ORDER'
      readonly translateZ: number
      readonly rotateX: number
      readonly rotateY: number
      readonly rotateZ: number
      readonly backfaceVisible?: boolean
      readonly visible?: boolean
    }
  | {
      readonly type: 'FREEFORM'
      readonly backfaceVisible: boolean
      readonly visible?: boolean
    }

• NONE: No 3D transform. Assign { type: 'NONE' } to remove an existing transform.
• FIXED_ORDER: An editable transform corresponding to the CSS transform functions translateZ() rotateX() rotateY() rotateZ(), in that order. All four numeric fields are required and must be finite. translateZ is in pixels; the rotations are in degrees. Negative values are allowed.
• FREEFORM: An imported transform that plugins can read. Assigning it throws an error.

For FIXED_ORDER transforms, you can also set:

• backfaceVisible: Shows or hides the back of the layer. In CSS, this is backface-visibility: visible (true) or backface-visibility: hidden (false).
• visible: Turns the 3D transform on or off without clearing its settings.

Both options default to true if you leave them out. You can't edit the returned object directly, so copy the current FIXED_ORDER value and assign it back with your changes. This keeps the other settings intact. See transform3d for an example.

A 3D transform changes how the layer looks on the canvas. It doesn't change its layout size or relativeTransform.

Perspective is configured on a container with scene3d. Use transformOrigin to change the point around which the transform is applied.

Fixed-order rotations and Z translation can be animated with the Motion keyframe API.