CSS 3D Transform Playground

Rotate, translate, and scale a card in 3D space. Adjust the perspective and copy the generated transform CSS.

Rotation

Rotate X-20deg

Rotate Y30deg

Rotate Z0deg

Depth & Scale

Perspective800px

Translate Z0px

Scale1

Live Preview

3D

Generated CSS

.scene {
  perspective: 800px;
}

.card {
  transform: rotateX(-20deg) rotateY(30deg) rotateZ(0deg) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}