Documentation - CSS-3D

Quick Start

Sign in with GitHub and open the Builder UI.
Add a plane, cube, polygon, cylinder, sphere, light, or container from the object panel.
Select objects to edit transform, materials, borders, and face-level options.

Transform Origin defines the pivot used by rotate and scale operations for the selected object.
Use Origin X (%) and Origin Y (%) in the Transform panel to move the pivot from center (50, 50) to any custom point.
Preset buttons (Center, TL, TR, BL, BC, BR) quickly snap the pivot to common anchor points.
Origin values support negative numbers and values above 100, so the pivot can be placed outside object bounds.
Viewport gizmos are drawn at the object origin point; when a cube face is selected, the gizmo anchors to that face center.

W / S / R: activate Move / Scale / Rotate gizmo and arm keyboard transform mode for the selected object.
After W, S, or R press X, Y, or Z to choose an axis (for scale, Z is available only on cubes and cylinders).
Press 1 / 2 / 3 / 4 / 5 / 6 to switch the viewport to Top / Bottom / Left / Right / Front / Back views.
Type a numeric value (supports +, -, and decimals) to apply axis delta in real time; Backspace edits the value.
Enter confirms the keyboard transform; Esc cancels and restores the object to its original values.
Ctrl+Z (or Cmd+Z on macOS) performs undo, except while typing in input/textarea/select fields.
Delete removes the selected object from the scene (cascading deletion for child objects in containers).
/ toggles isolation mode for the selected object (all other objects are hidden until toggled again).

Plane: basic rectangular div surface with color/image/video backgrounds.
Cube: six editable faces with separate material and border controls.
Polygon: editable multi-corner shape with adjustable side count and point positions.
Cylinder: segmented curved surface with top/bottom caps and per-surface blur controls.
Sphere: tiled CSS 3D shell with consistent color and dynamic light/shadow shading.
Light: emissive helper object used as the nearest light source for scene shading.
Container: grouping node for organizing scene hierarchies.

Create clips in the timeline panel and edit keyframes per object lane.
Each object has its own lane so markers at the same timestamp do not overlap selection.
Right-click a lane to open the context menu and add a marker at the clicked time.
Use play/pause and scrubbing to preview interpolation directly in the viewport.
Interpolation modes include linear, ease-in, ease-out, and ease-in-out.
Animation clips are saved with your scene and restored when the scene is loaded.

Save uploads your scene JSON to Firestore and keeps a reusable app URL.
Preview routes render saved scenes and keep viewport rotation settings.
Export downloads a ZIP containing HTML and CSS for all supported objects, with optional JS controls and 360 animation.
You can choose an animation clip in the header before export to bake timeline animation into the export.
When a clip is selected, clip export is used and 360 export is disabled for that export run.
Export JSON downloads your full scene snapshot for backup or sharing.
Import JSON adds the snapshot into your current scene inside a new root container (it does not replace your current scene).

The Mirror Modifier allows you to create symmetrical copies of objects across the X, Y, or Z axes.
Select an object, then click the "Mirror" button in the Modifiers panel (right section) to open mirror options.
Choose one or more axes to mirror your object. The preview updates in real time.
Apply the modifier to commit the mirrored geometry, or cancel to revert.
Mirrored objects inherit materials, transforms, and can be further edited or grouped.
Use the Remove button in the Mirror Modifier panel to delete the modifier from the selected object.