WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3D Cube HTML Viewer
15
iroger7
Open In Editor
Publish Your Code
Recommended
21 July 2025
HTML TV Screen with YouTube Embed & Effects
14 November 2025
3D Login Signup Box HTML CSS
25 May 2025
Portflio Modren and Post System { HTML CSS JS } By Youssef Pl
HTML
Copy
3D Cube Viewer
3D Cube Viewer
Front
Back
Right
Left
Top
Bottom
CSS
Copy
/* 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); }
JS
Copy
// 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; });