Glopzi
Sign up

Reference

3D transforms.

The depth axis. Rotate elements along X and Y, set a perspective to control how dramatic the 3D feels. Available on all animation types, runs on GPU like regular transforms.

The 3D properties

PropertyTypeDefaultDescription
rotateXnumber (deg)0Rotation around the horizontal axis. Positive tips the top of the element away from the viewer.
rotateYnumber (deg)0Rotation around the vertical axis. Positive tips the right side of the element away from the viewer.
rotateZnumber (deg)0Rotation around the depth axis. Same as the 2D rotate property; included here for completeness.
perspectivenumber (px)(none)Distance from the viewer to the rotation plane in pixels. Smaller values exaggerate 3D; larger values flatten it.

Perspective: the depth control

Without perspective, rotateX and rotateY produce a flat orthographic projection: the rotated element looks squished, not tilted in space. Perspective adds the depth cue that makes rotations feel volumetric.

  • 200–400px: dramatic, theatrical 3D. The rotation feels exaggerated, like a pop-up book.
  • 800–1200px: realistic, subtle 3D. The rotation feels natural without grabbing too much attention.
  • 2000+px: nearly flat. Useful when you want a hint of depth without the element looking theatrical.
  • None / 0: flat orthographic. The rotation still happens but without depth cues.

Note

Perspective is set on the animation, not on the element itself. The same value applies to all checkpoints. To animate the perspective itself (zooming the camera), set it as a per-checkpoint value.

Useful patterns

  • Card flip on hover. rotateY 0 to 180, perspective 1000. The card spins to its back side.
  • Tilt on scroll. Scroll animation, rotateX 0 to -10. The element tilts forward as the visitor scrolls into it. Subtle, conveys depth.
  • Page turn. rotateY 0 to -180, perspective 800, transform-origin set in CSS to the left edge. The element turns like a page from a book.
  • Cube-like reveal. rotateX 90 to 0, perspective 600. The element appears to fold down into place from above.

Browser and performance notes

3D transforms are supported in every browser Glopzi targets. Performance is on par with 2D transforms because the same compositor handles both.

One caveat: 3D transforms force the element onto its own compositor layer. On pages with hundreds of 3D elements, this can affect memory. Stick to 3D for hero and key elements; don’t blanket apply.

Next steps