WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Visionneuse HTML de cubes 3D
20
iroger7
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
6 January 2025
Une page d'accueil moderne
16 February 2025
Un code de NotYoEA
28 October 2024
Conception de carte de profil
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; });