Rotating Cube Buttons

jitesh208
Jan 20, 2026 2
Live Preview

Live Editor

 <div class="cube-container">
        <div class="cube">
            <div class="face front">CLICK</div>
            <div class="face back">ME!</div>
            <div class="face right">3D</div>
            <div class="face left">CUBE</div>
            <div class="face top">COOL</div>
            <div class="face bottom">YEAH</div>
        </div>
    </div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    font-family: 'Arial', sans-serif;
    perspective: 1000px;
    overflow: hidden;
}

.cube-container {
    width: 200px;
    height: 200px;
    cursor: pointer;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(20deg) rotateY(20deg); }
    50% { transform: translateY(-20px) rotateX(20deg) rotateY(20deg); }
}

.cube:hover {
    animation: none;
    transform: rotateX(0deg) rotateY(0deg) scale(1.1);
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.face:hover {
    opacity: 1;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) inset;
}

.front {
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: rotateY(0deg) translateZ(100px);
}

.back {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    transform: rotateY(180deg) translateZ(100px);
}

.right {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    transform: rotateY(90deg) translateZ(100px);
}

.left {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    transform: rotateY(-90deg) translateZ(100px);
}

.top {
    background: linear-gradient(135deg, #fa709a, #fee140);
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    background: linear-gradient(135deg, #30cfd0, #330867);
    transform: rotateX(-90deg) translateZ(100px);
}

.cube.spinning {
    animation: spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spin {
    0% { transform: rotateX(20deg) rotateY(20deg); }
    100% { transform: rotateX(380deg) rotateY(740deg); }
}
const cube = document.querySelector('.cube');
const container = document.querySelector('.cube-container');

container.addEventListener('click', function() {
    cube.classList.add('spinning');
    
    setTimeout(() => {
        cube.classList.remove('spinning');
    }, 2000);
});

let isDragging = false;
let previousMouseX = 0;
let previousMouseY = 0;
let rotationY = 20;
let rotationX = 20;

container.addEventListener('mousedown', function(e) {
    isDragging = true;
    previousMouseX = e.clientX;
    previousMouseY = e.clientY;
});

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    
    const deltaX = e.clientX - previousMouseX;
    const deltaY = e.clientY - previousMouseY;
    
    rotationY += deltaX * 0.5;
    rotationX -= deltaY * 0.5;
    
    cube.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
    
    previousMouseX = e.clientX;
    previousMouseY = e.clientY;
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});
Categories

Rotating Cube Buttons

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
