3D Rotating Cube Carousel — HTML CSS JS Snippet

<div class="cube-stage">
  <div class="cube-scene">
    <div class="cube" id="cube">
      <div class="cube-face cube-front"><span class="cube-emoji">🚀</span><h3>Launch Faster</h3><p>Ship features in days, not sprints.</p></div>
      <div class="cube-face cube-right"><span class="cube-emoji">🔒</span><h3>Stay Secure</h3><p>SOC2-ready by default, every deploy.</p></div>
      <div class="cube-face cube-back"><span class="cube-emoji">📈</span><h3>Scale With Ease</h3><p>Auto-scaling infra that just works.</p></div>
      <div class="cube-face cube-left"><span class="cube-emoji">🤝</span><h3>Collaborate Live</h3><p>Real-time editing, zero merge conflicts.</p></div>
    </div>
  </div>
  <div class="cube-controls">
    <button class="cube-btn" id="cubePrev" aria-label="Previous face">‹</button>
    <div class="cube-dots" id="cubeDots"></div>
    <button class="cube-btn" id="cubeNext" aria-label="Next face">›</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0f1a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.cube-stage{width:100%;max-width:340px}
.cube-scene{width:100%;height:280px;perspective:900px;display:flex;align-items:center;justify-content:center}
.cube{position:relative;width:260px;height:260px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.cube-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;border-radius:16px;text-align:center;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cube-emoji{font-size:44px}
.cube-face h3{color:#fff;font-size:17px;font-weight:800}
.cube-face p{color:rgba(255,255,255,.75);font-size:13px;line-height:1.5;max-width:200px}
.cube-front{background:linear-gradient(160deg,#6366f1,#4338ca);transform:rotateY(0deg) translateZ(130px)}
.cube-right{background:linear-gradient(160deg,#0ea5e9,#0369a1);transform:rotateY(90deg) translateZ(130px)}
.cube-back{background:linear-gradient(160deg,#ec4899,#9d174d);transform:rotateY(180deg) translateZ(130px)}
.cube-left{background:linear-gradient(160deg,#10b981,#047857);transform:rotateY(-90deg) translateZ(130px)}
.cube-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.cube-btn{width:40px;height:40px;border-radius:50%;background:#161c2c;border:1px solid #2a3348;color:#cbd5e1;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .1s}
.cube-btn:hover{background:#232c42;color:#fff}
.cube-btn:active{transform:scale(.92)}
.cube-dots{display:flex;gap:8px}
.cube-dot{width:8px;height:8px;border-radius:50%;background:#2a3348;cursor:pointer;border:none;transition:background .2s,width .2s}
.cube-dot.active{background:#6366f1;width:22px;border-radius:4px}

var cube = document.getElementById('cube');
var faces = ['front', 'right', 'back', 'left'];
var current = 0;

function render() {
  cube.style.transform = 'rotateY(' + (-current * 90) + 'deg)';
  document.querySelectorAll('.cube-dot').forEach(function (d, i) {
    d.classList.toggle('active', i === current);
  });
}

function next() { current = (current + 1) % faces.length; render(); }
function prev() { current = (current - 1 + faces.length) % faces.length; render(); }

document.getElementById('cubeNext').addEventListener('click', next);
document.getElementById('cubePrev').addEventListener('click', prev);

var dotsWrap = document.getElementById('cubeDots');
faces.forEach(function (f, i) {
  var d = document.createElement('button');
  d.className = 'cube-dot';
  d.setAttribute('aria-label', 'Go to face ' + (i + 1));
  d.addEventListener('click', function () { current = i; render(); });
  dotsWrap.appendChild(d);
});

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') next();
  else if (e.key === 'ArrowLeft') prev();
});

// Swipe support
var startX = null;
cube.addEventListener('touchstart', function (e) { startX = e.touches[0].clientX; });
cube.addEventListener('touchend', function (e) {
  if (startX === null) return;
  var dx = e.changedTouches[0].clientX - startX;
  if (Math.abs(dx) > 40) { dx < 0 ? next() : prev(); }
  startX = null;
});

render();