CSS 3D transform with sliders. Essential for hover effects, card flips, 3D galleries.
๐ŸงŠ Preview
CSS code

How to use

  1. Pick a shape (card / cube / image).
  2. Tune perspective ยท rotate ยท translate ยท scale.
  3. Preview live.
  4. Copy CSS into your project.
  5. Use reset / random for variations.

Key features

  • Combined perspective + rotate3d + translate3d + scale3d
  • 3 shapes (card, cube, image)
  • Auto 6-face cube
  • Reset / random shuffle
  • Instant CSS copy

Use cases

  • Card flip animations โ€” reveal the back on hover
  • Image gallery rotation โ€” 3D carousel
  • 3D cube menus โ€” 6-face menu UI
  • 360ยฐ product rotation โ€” e-commerce interactions
  • Loading indicators โ€” rotating spinners

CSS 3D Transform key concepts

perspective is the viewer-to-screen distance; smaller = stronger distortion. rotate3d rotates around X/Y/Z, translate3d moves in 3 axes, scale3d scales per-axis. Usually perspective on the parent and transform on the child. Add transform-style: preserve-3d on children to keep their children 3D. For cubes, position each face absolutely then rotate + translateZ.

FAQ

vs css-transform?

css-transform covers 2D + basic 3D; this is 3D-focused with perspective + cube preview.

3D breaks on mobile?

Mobile Safari has some 3D limitations. Add -webkit-transform-style prefix.

6-face cube how?

Position each face absolute at the same spot, then unique rotate + translateZ for each.

Free?

Yes.