Webleb - UI Elements - 3D Cube HTML Viewer

/* Basic body styling */
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #222;
  color: #fff;
  text-align: center;
}

/* Scene container with perspective */
.scene {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  perspective: 800px;
  border: 2px solid #444;
}

/* Cube container */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  transition: transform 0.5s ease-out;
  cursor: grab;
}

/* Base styling for cube faces */
.face {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 128, 255, 0.6);  
}

/* Positioning each face in 3D space */
.front {
  transform: translateZ(150px);
  background: rgba(255, 99, 71, 0.8);
}

.back {
  transform: rotateY(180deg) translateZ(150px);
  background: rgba(60, 179, 113, 0.8);
}

.right {
  transform: rotateY(90deg) translateZ(150px);
  background: rgba(65, 105, 225, 0.8);
}

.left {
  transform: rotateY(-90deg) translateZ(150px);
  background: rgba(238, 130, 238, 0.8);
}

.top {
  transform: rotateX(90deg) translateZ(150px);
  background: rgba(255, 215, 0, 0.8);
}

.bottom {
  transform: rotateX(-90deg) translateZ(150px);
  background: rgba(72, 209, 204, 0.8);
}

// Select the cube element
const cube = document.querySelector('.cube');

let isDragging = false;
let startX, startY;
let currentRotationX = -30;
let currentRotationY = 45;

// Mouse events for dragging to rotate the cube
cube.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  cube.style.cursor = "grabbing";
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  cube.style.cursor = "grab";
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

// Calculate the distance moved
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  
  // Update rotation values based on mouse movement
  currentRotationY += deltaX * 0.5;
  currentRotationX -= deltaY * 0.5;

// Apply the rotation transformation
  cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;

// Update start positions for next calculation
  startX = e.clientX;
  startY = e.clientY;
});

Validating your code, please wait...

HTML

CSS