Component shape/3dbox

Component ID: shape/3dbox

A 3D box with 6 independently-styled faces (front, back, left, right, top, bottom) that can rotate in 3D space. Specify an origin rotation/zoom state and a destination state, and the box animates between them. Each face can have its own background image or color. Perfect for 3D photo displays, product showcases, or creative 3D transitions.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Box rotates from origin (rotateX/Y/Z, zoom, position) to destination state with configurable duration and easing.
Intro duration	5 s

Preview

Element schema

Minimal shape of a shape/3dbox component element:

{
    "type": "component",
    "component": "shape/3dbox",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`size`

Box dimensions.

Property	Type	Default	Description
`width`	string	`400px`	Box width (e.g. '20vw').
`height`	string	`300px`	Box height.
`depth`	string	`50px`	Box depth.

`front`

Front face styling. Same properties for back, left, right, top, bottom.

Property	Type	Default	Description
`background-image`	string	—	Face background image URL.
`background-size`	string	`cover`	Background size.
`background-position`	string	`center`	Background position.
`background`	string	—	Background color.

`origin`

Initial state of the 3D box.

Property	Type	Default	Description
`x`	string	—	X position (e.g. '50%').
`y`	string	—	Y position.
`zoom`	string	—	Zoom level.
`rotateX`	string	—	X rotation (e.g. '0deg').
`rotateY`	string	—	Y rotation.
`rotateZ`	string	—	Z rotation.

`destination`

Final state of the 3D box (same properties as origin).

Property	Type	Default	Description
`x`	string	—	X position.
`y`	string	—	Y position.
`zoom`	string	—	Zoom level.
`rotateX`	string	—	X rotation.
`rotateY`	string	—	Y rotation.
`rotateZ`	string	—	Z rotation.

`animation`

Animation timing.

Property	Type	Default	Description
`duration`	number	`2000`	Duration in ms.
`easing`	string	`easeOutQuad`	Anime.js easing.