← 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.

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.

Center origin

Balanced Scene

A six-face cube rotates slowly inside a centered perspective scene. Each face rotates first, then moves out by half the cube size with translateZ.

  • perspective
  • preserve-3d
  • translateZ

Offset perspective

Wide Origin

A shifted perspective-origin makes depth bias visible without changing face placement. Use origin changes to teach camera position.

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

Structure-first view

Face Assembly

A quieter cube highlights visible face separation and transform responsibility. Keep labels and face colors simple when demonstrating transform order.

  • face-rotate
  • transform-order
  • teaching

Cube inspector

Balanced Scene

  • perspective
  • preserve-3d
  • translateZ

A six-face cube rotates slowly inside a centered perspective scene. Each face rotates first, then moves out by half the cube size with translateZ.

.scene {
  perspective: 720px;
  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--back  { transform: rotateY(180deg) translateZ(48px); }
.cube__face--right { transform: rotateY(90deg)  translateZ(48px); }
.cube__face--left  { transform: rotateY(-90deg) translateZ(48px); }
.cube__face--top   { transform: rotateX(90deg)  translateZ(48px); }
.cube__face--bottom{ transform: rotateX(-90deg) translateZ(48px); }

@keyframes cubeTurn {
  0%   { transform: rotateX(-20deg) rotateY(22deg); }
  100% { transform: rotateX(-20deg) rotateY(382deg); }
}

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