Scene3d
3D transforms are available in beta. The API is subject to change.
A shared 3D rendering context for the children of a FrameNode, ComponentNode, or InstanceNode. Set it with scene3d to configure perspective and whether children share a 3D space.
Apply Transform3d to children to rotate them in 3D or move them along the Z axis. The container's perspective controls how those transformed children are projected onto the canvas. To disable perspective without changing the other scene settings, set perspective to -1. See scene3d for a complete example.
Reads return null when no scene is configured. Assigning { perspective: -1, preserve3d: false } also reads back as null when visible is omitted or true. With visible: false, it reads back as an object.
Instances inherit their main component's scene until overridden. Assigning null clears a frame or component's scene, or opts an instance out of its inherited scene.
perspective: number [readonly]
Perspective distance in pixels, corresponding to CSS perspective. Negative values disable perspective; -1 is the default. 0 and positive values below 1 render as 1px perspective. The assigned value is preserved and must be finite.
preserve3d: boolean [readonly]
Whether children share a 3D rendering context—a shared space in which their transformed depth determines rendering order. Corresponds to CSS transform-style: preserve-3d when true, or flat when false.
When true, children share a 3D space. Overlapping surfaces are rendered according to their transformed depth along the Z axis. Surfaces in the same plane follow layer order.
When false, children are flattened into the container's plane and drawn in layer order, regardless of their depth.
Avoid applying opacity, blend modes, effects (including linked effect styles), or clipsContent to a container whose scene3d.preserve3d is true. These properties have no visual effect on that container: it renders with full opacity and PASS_THROUGH blending, without effects or clipping. Their stored values are retained and apply again when preserve3d is false.
To apply opacity, blending, effects, or clipping to the whole scene, use an ancestor frame with preserve3d: false. Put the perspective on that flat frame and keep preserve3d: true on an inner container so its children still share a 3D space. Applying opacity to individual children fades each one separately, which can make overlapping children show through one another.
visible?: boolean [readonly]
Whether the scene's perspective effect is applied. Defaults to true when omitted on assignment. Setting this to false preserves the stored perspective value; preserve3d applies independently.