"3D" Elevating Cubes

by Joe Pea

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="slider"></div>
<div class="box"></div>

CSS

.hidden {
     display:none;
      visibility: hidden;  
}

body
{
    background: black;
}

.cube
{
    position: relative;
}

.cube .rightFace, .cube .leftFace
{
    height: 25px; width: 10px; padding: 5px;
}

.leftFace
{
    position: absolute;

    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    -o-transform: skew(0deg, 30deg);

    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
    -o-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;

    border: 1px solid black;
}

.rightFace
{
    -webkit-transform: skew(0deg, -30deg);
    -moz-transform: skew(0deg, -30deg);
    -o-transform: skew(0deg, -30deg);

    position: absolute;
    left: 19.5px;

    border: 1px solid black;
}

.topFace div
{    
    width: 19px;
    height: 19px;


    border: 1px solid black;

    -webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
    -moz-transform: skew(0deg, -30deg) scale(1, 1.16);
    -o-transform: skew(0deg, -30deg) scale(1, 1.16);
}

.topFace
{
    position: absolute;

    left: 10.25px;
    top: -16.5px;

    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}

#slider
{
    width: 200px;
    margin: 0 auto;
}

JavaScript

function refreshCubes()
{
    $('.box').empty();
    var x = $("#slider").slider("value");
    var initialTop = 50;
    var initialLeft = 450;

    for(var i = 1; i < x; i++)
    {
        for(var j = 1; j < x; j++)
        {
            var cube = $('<div class="cube hidden"><div class="topFace">' + 
                         '<div></div></div><div class="leftFace"></div>' +
                         '<div class="rightFace"></div></div>');
            $('.box').append(cube);
            
            var thisCube = $('.cube:last');

            thisCube.css( // last cube added
            {
                left : initialLeft + (20 * i) + (-19 * j) + 'px',
                top : initialTop + (11 * i) + (11 * j) + 'px'
            });
            
            thisCube.attr('data-initialtop', '' + (initialTop + (11 * i) + (11 * j)));
            thisCube.attr('data-raisedtop', '' + (initialTop + (11 * i) + (11 * j) - 25));

            thisCube.find('.topFace div')
                .css('background', 'rgb(100,' +
                                    Math.ceil(255 - 16 * i) + ',' +
                                    Math.ceil(255 - 16 * j) + ')');
            thisCube.find('.rightFace')
                .css('background', 'rgb(35,' + 
                                    Math.ceil(190 - 16 * i) + ',' +
                                    Math.ceil(190 - 16 * j) + ')');
            thisCube.find('.leftFace')
                .css('background', 'rgb(35,' + 
                                   Math.ceil(190 - 16 * i) + ',' +
                                   Math.ceil(190 - 16 * j) + ')');
            thisCube.children('div').css('opacity', '.9');
            
            thisCube.removeClass('hidden');

        }
    }
}

$(document).ready(function()
{    

            $('.cube').live('mouseenter', function()
            {
                var thisCube = $(this);
                $(this).animate({top: thisCube.attr('data-raisedtop')+'px'}, 400, 'easeInCubic');

            });
...