CSS3 Cube

by Jayson Buquia

HTML

<div class="wrap">
    <div class="btn">
        Button
    </div>
     <div class="btn">
        Button 2
    </div>
    <div class="btn">
        Button 3
    </div>
    <div class="btn revbtn">
        toggle revolve
    </div>
    
   <div class="cube-container">
        <div class="cube">
            <div class="front face">1</div>
            <div class="back face">2</div>
            <div class="right face">3</div>
            <div class="left face">4</div>
            <div class="top face">5</div>
            <div class="bottom face">6</div>
        </div>
   </div>
    
    
</div>

CSS

.wrap {
    background: green;
    padding: 20px 15px;      
}

.btn {
    display: inline-table;
    background: yellow;
    color: red;
    padding: 10px 15px;
   cursor: pointer;
    perspective: 300px;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0 rgba(255,255,0,1);
    }
    100% {
        box-shadow: 0 0 99px rgba(255,255,0,1);
    }
}

@-webkit-keyframes glow {
    0% {
        box-shadow: 0 0 0 rgba(255,255,0,1);
    }
    100% {
        box-shadow: 0 0 99px rgba(255,255,0,1);
    }
}

@-moz-keyframes glow {
    0% {
        box-shadow: 0 0 0 rgba(255,255,150,0.3);
    }
    50% {
        transform: translateZ(-50px);
    }    
    80% {
        box-shadow: 0 0 0 50px rgba(255,255,150,0);
    }
    100% {
        transform: translateZ(0);
    }
}

@-moz-keyframes revolve {
    0% {
        transform: scale(0.5) translateZ(150px)
            rotateX(0) rotateY(0) rotateZ(0);
    }  
    50%
    {
        transform: scale(0.5) translateZ(0px)
            rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    }
    100%
    {
        transform: scale(0.5) translateZ(150px)
            rotateX(-720deg) rotateY(720deg) rotateZ(720deg);
    }
}

.glow {
   -webkit-animation : glow 0.3s ease;
    -moz-animation : glow 0.3s ease;
    -ms-animation : glow 0.3s ease;
    -o-animation : glow 0.3s ease;
    animation : glow 0.3s ease;
}

.cube-container {
     perspective: 999999px;
    position: relative;
    display: table;
    overflow: visible;
    transition : all 0.5s ease;
}

.revolve {
     -moz-animation: revolve linear 5s infinite;
}

.cube {
    cursor: move;
    width: 150px;
    height: 150px;
    position: relative;
    color: white;
    /* perspective: 300px; */   
    transform-style: preserve-3d;
    transform-origin: center center;
    transform: scale(0.5) translateZ(75px);/*  rotateY(180deg) rotateX(15deg) rotateZ(15deg);  */
}
.face {
    height: 100%;
    width: 100%;    
    position: absolute;
    font-size: 5em;
    line-height:...

JavaScript

$('.btn').click(function(){
    $(this).addClass('glow').delay(300).queue(function(){
        $(this).removeClass('glow').dequeue();
    });
})

var cube = (function(e){

    var o = this, w = $('.cube-container'), elem = e,
        currX = 0,
        currY = 0,
        revbtn = $('.revbtn');
    
    w.mousedown(function(e){    
        var originX = e.pageX,
            originY = e.pageY;        
        
        w.mousemove(function(f){
            currX = currX + (f.pageX - originX);
            currY = currY + (originY - f.pageY);           
            elem.css('transform','scale(0.5) translateZ(150px) rotateX('+currY*0.8+'deg)  rotateY('+currX*0.8+'deg)');
        });
    }).mouseup(function(){
        $(this).unbind('mousemove');
    })
    
    revbtn.click(function(){
        elem.toggleClass('revolve')
    })
    

})($('.cube'));