3D Cube HTML Viewer

Open In Editor Publish Your Code

/* 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);
}

JS

// 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;
});

3D Cube HTML Viewer

Recommended

HTML TV Screen with YouTube Embed & Effects

3D Login Signup Box HTML CSS

Portflio Modren and Post System { HTML CSS JS } By Youssef Pl

HTML

CSS

JS

Recommended

HTML TV Screen with YouTube Embed & Effects

3D Login Signup Box HTML CSS

Portflio Modren and Post System { HTML CSS JS } By Youssef Pl

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS