title
A prototype
Front
Back
Top
Bottom
Left
Right
#cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; margin:100px; } #cube .side { position: absolute; width: 100px; height: 100px; font-size: 24px; text-align: center; line-height: 100px; color: white; background-color: #333; } #cube .front { transform: translateZ(50px); } #cube .back { transform: rotateY(180deg) translateZ(50px); } #cube .top { transform: rotateX(90deg) translateZ(50px); } #cube .bottom { transform: rotateX(-90deg) translateZ(50px); } #cube .left { transform: rotateY(-90deg) translateZ(50px); } #cube .right { transform: rotateY(90deg) translateZ(50px); }
// Get the element we want to rotate let element = document.getElementById('cube'); let x = 0; // Initial X rotation let y = 0; // Initial Y rotation let z = 0; // Initial Z rotation // Set the initial rotation of the element element.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`; // Set up the event listeners element.addEventListener('mousedown', handleMouseDown); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); let isDragging = false; // Whether or not the mouse is currently pressed let startX = 0; // The starting X position of the mouse let startY = 0; // The starting Y position of the mouse function handleMouseDown(event) { isDragging = true; startX = event.clientX; startY = event.clientY; } function handleMouseMove(event) { if (isDragging) { // Calculate the change in mouse position let dx = event.clientX - startX; let dy = event.clientY - startY; // Update the rotation values x += dy; y += dx; z += dx; // Update the element's rotation element.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`; // Update the starting position of the mouse startX = event.clientX; startY = event.clientY; } } function handleMouseUp(event) { isDragging = false; }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code