Rubik refactor

by Csaba Hellinger

HTML

<div id="content">
    <div id="rubik">
    </div> 
</div>

CSS

body {
    background-color: #111;
    padding: 10px;   
}
 
#content {
    width: 550px;
    height: 550px;    
    background-color: #555;
    margin: 0 auto;
}

@-webkit-keyframes spinner {
    from { transform: rotateX(0deg)    rotateZ(0deg); }
    to   { transform: rotateX(-360deg) rotateZ(-360deg); }
}

#rubik {
    -webkit-animation-name: spinnerrrr;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;    
    transform-style: preserve-3d;
    
    position: relative;
    top: 125px;
    left: 125px;
    
    perspective: 4000px;
    transform-origin: 50% 50% -150px;
    width: 300px;
    height: 300px;   
    
    transform: rotateX(-35deg) rotateY(35deg) rotateZ(0deg);
}

.cell {
    transform-style: preserve-3d;
    transform-origin: 150px 150px -150px;  
}

.side {
    position: absolute;
    background-color: #222;
}

.color {
    width: 90px;
    height: 90px;
    margin: 5px;
    border-radius: 6px;
    text-align: center;/*TEST*/
}

.color.color1 { background-color: #B71234; }
.color.color2 { background-color: #FF5800; }
.color.color3 { background-color: #009B48; }
.color.color4 { background-color: #0046AD; }
.color.color5 { background-color: #FFFFFF; }
.color.color6 { background-color: #FFD500; }

JavaScript

function rubik() {
    var $rubik = $("#rubik"),
        size = 3,
        width = 300,
        cellwidth = width / size,
        data = [],
        
        px = function px(index) {
            return (index * cellwidth) + "px";
        },
        
        addSide = function addSide($cell, outer, x, y, z, axis, axisrot, classes) {
            var trans = "translate3D(" + px(x) + "," + px(y) + ",-" + px(z) + ")",
                rot = "rotate" + axis + "(" + axisrot + "deg)",
                $side = $("<div>")
                .addClass("side")
                .css({
                    "width": cellwidth + 1,
                    "height": cellwidth + 1,                   
                    "transform": trans + " " + rot
                });
            if (outer) {
                $side.append($("<div>").addClass("color " + classes));
            }
            $cell.append($side);
        },
        
        addCell = function addCube(x, y, z) {
            var $cell = $("<div>").addClass("cell");
            addSide($cell, y==0, x,     y-0.5, z+0.5, "X",  90, "color1"); // top    (red)
            addSide($cell, y==2, x,     y+0.5, z+0.5, "X", -90, "color2"); // bottom (orange)
            addSide($cell, x==0, x-0.5, y,     z+0.5, "Y", -90, "color3"); // left   (green)
            addSide($cell, x==2, x+0.5, y,     z+0.5, "Y",  90, "color4"); // right  (blue)
            addSide($cell, z==0, x,     y,     z,     "Y",   0, "color5"); // front  (white)
            addSide($cell, z==2, x,     y,     z+1.0, "Y", 180, "color6"); // back   (yellow)
            //$cell.find(".color").text(x+","+y+","+z); // TEST
            $cell.click(function () {console.log($(this).data());});
            $rubik.append($cell);
            return $cell;
        },
        
        axisSwap = function axisSwap(axis, sig, i1, i2, iMinus) {
            var axisTemp = axis[i1],
                sigTemp = sig[i1];
            axis[i1] = axis[i2];
            axis[i2] = axisTemp;
        ...