Rubic's Cube HTML5 CSS

by Sebastian Kay

HTML

<section id="rubik">
<div id="cube-container">
    <div id="cube-viewport">
        <div id="cube" style="-webkit-transform: rotateX(0deg) rotateY(130deg)">
        <!-- UP FACE -->            
            <!-- LEFT COLUMN (L)  -->                
            <div class="utl cubie"><div><span>U1</span></div></div> 
            <div class="ucl cubie"><div><span>U2</span></div></div>
            <div class="ubl cubie"><div><span>U3</span></div></div>
            <!-- CENTER COLUMN (C)  -->            
            <div class="utc cubie"><div><span>U4</span></div></div>
            <div class="ucc cubie"><div><span>U5</span></div></div>
            <div class="ubc cubie"><div><span>U6</span></div></div>
            <!-- RIGHT COLUMN (R)  -->
            <div class="utr cubie"><div><span>U7</span></div></div>
            <div class="ucr cubie"><div><span>U8</span></div></div>
            <div class="ubr cubie"><div><span>U9</span></div></div>
        <!-- END UP FACE -->  

        <!-- FRONT FACE -->
            <!-- LEFT COLUMN (L)  -->                
            <div class="ftl cubie"><div><span>F1</span></div></div>
            <div class="fcl cubie"><div><span>F2</span></div></div>
            <div class="fbl cubie"><div><span>F3</span></div></div>
            <!-- CENTER COLUMN (C)  -->            
            <div class="ftc cubie"><div><span>F4</span></div></div>
            <div class="fcc cubie"><div><span>F5</span></div></div>
            <div class="fbc cubie"><div><span>F6</span></div></div>
            <!-- RIGHT COLUMN (R)  -->
            <div class="ftr cubie"><div><span>F7</span></div></div>
            <div class="fcr cubie"><div><span>F8</span></div></div>
            <div class="fbr cubie"><div><span>F9</span></div></div>
        <!-- END FRONT FACE -->
        
        <!--DOWN FACE -->
            <!-- LEFT COLUMN (L)  -->                
            <div class="dtl cubie"><div><span>D1</span></div></div>
            <div class="dcl...

CSS

body {padding: 4em;}
    #control{position: absolute;top:500px;}
    #control input[type="checkbox"]{width:20px;height:20px;}
    #control input[type="range"]{
    -webkit-appearance: textfield;
 }
 /*CUBE 3D TRANSFORMATIONS*/

#cube-container{
    position:absolute;
}

#cube-viewport{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;

    -webkit-perspective-origin: 50% 200px;
    -moz-perspective-origin: 50% 200px;
}

#cube{
    opacity: 0.8;   
    height: 400px;
    width: 400px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
        
}
#cube .cubie{
    position:absolute;
    margin: 1px;
    border: 3px solid black;
    border-radius: 15px;
    width:  100px;
    height: 100px;
    z-index: -1;
    text-align: center;
    font-size:30px;    
}

#cube .cubie > div{
    line-height: 100px;
    border-radius: 8px;
}
#cube .cubie > div span{
    opacity:0.6;
    font-size:14px;
}


/* CUBIES POSITIONS*/

/*UP FACE CUBIES*/
.utl {
    -webkit-transform:rotateX(90deg) translate3d(50px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(50px,-100px,0);
}
.ucl {
    -webkit-transform:rotateX(90deg) translate3d(50px,0,0);
    -moz-transform:rotateX(90deg) translate3d(50px,0,0);
}
.ubl {
    -webkit-transform:rotateX(90deg) translate3d(50px,100px,0px);
    -moz-transform:rotateX(90deg) translate3d(50px,100px,0px);
}
.utc {
    -webkit-transform:rotateX(90deg) translate3d(150px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(150px,-100px,0);
}
.ucc {
    -webkit-transform:rotateX(90deg) translate3d(150px,0,0);
    -moz-transform:rotateX(90deg) translate3d(150px,0,0);
}
.ubc {
    -webkit-transform:rotateX(90deg) translate3d(150px,100px,0);
    -moz-transform:rotateX(90deg) translate3d(150px,100px,0);
}
.utr {
    -webkit-transform:rotateX(90deg) translate3d(250px,-100px,0);
    -moz-transform:rotateX(90deg) translate3d(250px,-100px,0);
}
.ucr {
    -webkit-transform:rotateX(90deg) translate3d(250px,0,0);
   ...

JavaScript

document.querySelector('#cube').addEventListener("mousemove", mouseOver, false);
       function mouseOver(e){
        var x = e.pageX * 0.2,
            y = e.pageY * 0.2;
        rotate(x,y);
        }
        function showPlane(c){
            document.querySelector('#cube').style.background = c.checked ? '#CCC': '';
        }
        function rotate(newX,newY){
            var x = parseInt(document.querySelector('#rx').value,10) + (newX || 0),
                y = parseInt(document.querySelector('#ry').value,10) + (newY || 0),
            cube = document.getElementById('cube');

            cube.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
            cube.style.MozTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
            //cube.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
        }