CSS 3D Playground

Manipulate 3D space in real-time

Container (.stage)

perspective 800px

perspective-origin X 50%

perspective-origin Y 50%

Element (.cube)

rotateX -20deg

rotateY 45deg

rotateZ 0deg

translateX 0px

translateY 0px

translateZ 0px

Visualizers & Modifiers

Show Axes Helper (X, Y, Z) Explode Cube Faces Smooth Transition (Animate)

Front

Back

Left

Right

Top

Bottom

Live CSS Output

.stage {
  perspective: 800px;
  perspective-origin: 50% 50%;
}
.cube {
  transform: rotateX(-20deg) rotateY(45deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}