3D Rubik Cube

About 3D Rubik Cube

An interactive 3D cube component that transforms your portfolio into an engaging visual experience. Each of the six faces displays a 3x3 grid of project images, creating a Rubik's cube-style portfolio showcase.

Features

  • Automatic rotation — smooth continuous spin on load

  • Drag interaction — users can grab and spin the cube in any direction

  • Physics-based momentum — cube continues rotating after release with natural easing

  • Fully customizable — replace images with your own projects

  • Responsive — scales to fit any viewport

  • No dependencies — built with pure CSS 3D transforms, no WebGL or external libraries

What's included

  • 6 cube faces, each with 3x3 image grid (54 image slots total)

  • Auto-rotate animation

  • Drag-to-spin interaction with momentum

  • Customizable rotation speed

  • Adjustable cube size

How to customize

  1. Replace placeholder images with your portfolio work

  2. Adjust cube dimensions via variables

  3. Change rotation speed and direction

  4. Toggle auto-rotate on/off