CSS 3D Cube — Free HTML CSS JS Snippet

<div class="scene">
  <div class="stage">
    <div class="cube" id="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face left">Left</div>
      <div class="face right">Right</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </div>
  <div class="controls">
    <button class="btn" onclick="setCam(0,0)">Reset</button>
    <button class="btn" onclick="setCam(-20,45)">Perspective</button>
    <button class="btn" onclick="setCam(-90,0)">Top view</button>
    <button class="btn accent" onclick="toggleSpin()">Auto-spin</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.scene { display: flex; flex-direction: column; align-items: center; gap: 32px; }

.stage { perspective: 600px; width: 160px; height: 160px; }

.cube {
  width: 160px; height: 160px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(45deg);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.cube.spinning { animation: spin 6s linear infinite; }

@keyframes spin { to { transform: rotateX(-20deg) rotateY(405deg); } }

.face {
  position: absolute; width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  backface-visibility: visible;
}

.front  { background: rgba(99,102,241,0.5);  color: #c7d2fe; transform: rotateY(0deg)   translateZ(80px); }
.back   { background: rgba(139,92,246,0.5);  color: #ddd6fe; transform: rotateY(180deg) translateZ(80px); }
.left   { background: rgba(236,72,153,0.5);  color: #fbcfe8; transform: rotateY(-90deg) translateZ(80px); }
.right  { background: rgba(14,165,233,0.5);  color: #bae6fd; transform: rotateY(90deg)  translateZ(80px); }
.top    { background: rgba(16,185,129,0.5);  color: #a7f3d0; transform: rotateX(90deg)  translateZ(80px); }
.bottom { background: rgba(245,158,11,0.5);  color: #fde68a; transform: rotateX(-90deg) translateZ(80px); }

.controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn { padding: 7px 14px; font-size: 12px; font-weight: 600; background: #1e293b; color: #64748b; border: 1px solid #334155; border-radius: 7px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn:hover { border-color: #6366f1; color: #6366f1; }
.btn.accent { background: #6366f1; color: #fff; border-color: #6366f1; }

const cube = document.getElementById('cube');
let spinning = true;
cube.classList.add('spinning');

function setCam(rx, ry) {
  spinning = false;
  cube.classList.remove('spinning');
  cube.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
}

function toggleSpin() {
  spinning = !spinning;
  cube.classList.toggle('spinning', spinning);
  if (spinning) cube.style.transform = '';
}

let isDrag = false, startX, startY, curX = -20, curY = 45;
cube.addEventListener('mousedown', e => { isDrag = true; startX = e.clientX; startY = e.clientY; cube.classList.remove('spinning'); spinning = false; });
window.addEventListener('mousemove', e => {
  if (!isDrag) return;
  curY += (e.clientX - startX) * 0.5;
  curX -= (e.clientY - startY) * 0.5;
  startX = e.clientX; startY = e.clientY;
  cube.style.transform = `rotateX(${curX}deg) rotateY(${curY}deg)`;
});
window.addEventListener('mouseup', () => isDrag = false);