Skip to content
Orbit
Orbit 2 is out, with Orbit Kit 2 and a new site: read the Orbit 2 docs or see what changed. These docs stay here for Orbit 1.x.

Depth layers

Add depth to a .gravity-spot to stack its rings on the z axis. Each direct child is a layer: a ring, or a nested .bigbang when a layer needs its own radial layout. The layer in front is the one people read and use; the others wait behind it.

  • data-depth="1" moves a layer one step back. Values go from 0 to 8.
  • .layer-front marks the active layer and places it at depth 0.
  • --o-z sets the position directly, in unitless pixels. Negative values are farther away.

Layers keep their apparent size: the scale compensates for the perspective with (perspective − z) / perspective. Depth changes animate by default.

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

Properties

Section titled “Properties”

Set these on the .depth element, or on a single layer.

Property Default Purpose
--o-z depth × step Position on the z axis in unitless pixels. Set it on a layer to override data-depth.
--o-depth-step -110 Distance between depth steps.
--o-perspective 900 Perspective in unitless pixels.
--o-depth-grow 0 Extra size per step back. .42 gives 1×, 1.42×, 1.84×, so no two layers share a radius.
--o-depth-compensate 1 Set to 0 to let farther layers look smaller.
--o-back-opacity 1 Opacity of the layers behind the front one.
--o-depth-duration .8s Duration of the depth transition.
--o-depth-easing cubic-bezier(.2,.8,.2,1) Easing of the depth transition.

The transition is turned off when the user prefers reduced motion.

Rules

Section titled “Rules”
  • Layers are direct children of .depth. An element in between flattens the 3D context.
  • Rings outside .depth are not transformed. Adding data-depth alone does nothing.
  • Satellites, vectors, sides, <o-arc> and <o-progress> are never layers. They keep their own transforms; put them inside a ring and move the ring.
  • Back layers still receive clicks. Rings ignore pointer events and satellites accept them, so a click on a back layer’s satellite reaches it. Use that to bring a layer forward.
Section titled “Related”