← Back to gallery
CSSFeatured

Animated 3D Cube Perspective Walkthrough

A CSS 3D cube walkthrough that separates scene perspective from face transforms so rotate and translateZ order stays inspectable.

Duration
8s
Resolution
1440×900
Format
CSS
css-3dperspectivepreserve-3dtranslateZtransform-order

CSS 3D / Perspective

Animated 3D Cube Perspective Walkthrough

A preserve-3d cube shows how scene perspective, face rotation, translateZ, and transform order produce real depth.

balanced scene perspective cube - 7.0s cycle · 1.00 intensity

Center origin

Balanced Scene

A six-face cube rotates slowly inside a centered perspective scene.

The parent owns perspective while the cube owns transform-style: preserve-3d.

  • perspective
  • preserve-3d
  • translateZ

Offset perspective

Wide Origin

A shifted perspective-origin makes depth bias visible without changing face placement.

Face placement remains identical; only the scene origin changes.

  • perspective-origin
  • camera bias
  • css-3d

Structure-first view

Face Assembly

A quieter cube highlights visible face separation and transform responsibility.

Every face keeps backface visibility and a fixed 3D placement.

  • face-rotate
  • transform-order
  • teaching

Cube inspector

Balanced Scene

Motion contract
The parent owns perspective while the cube owns transform-style: preserve-3d.
Accessibility
Reduced motion pauses rotation and leaves the cube at a readable angle.

Each face rotates first, then moves out by half the cube size with translateZ.

css
.scene {
  perspective: 760px;
  perspective-origin: 50% 42%;
}

.cube {
  transform-style: preserve-3d;
  animation: cubeTurn 7.00s linear infinite;
}

.cube__face--front { transform: rotateY(0deg) translateZ(48px); }
.cube__face--right { transform: rotateY(90deg) translateZ(48px); }

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; transform: rotateX(-18deg) rotateY(28deg); }
}