Nested Cubes

by XTREME104

HTML

<script type="text/javascript" charset="utf-8">
    function hasClassName(inElement, inClassName)
    {
    var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
    return regExp.test(inElement.className);
    }
    
    function addClassName(inElement, inClassName)
    {
    if (!hasClassName(inElement, inClassName))
    inElement.className = [inElement.className, inClassName].join(' ');
    }
    
    function removeClassName(inElement, inClassName)
    {
    if (hasClassName(inElement, inClassName)) {
    var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
    var curClasses = inElement.className;
    inElement.className = curClasses.replace(regExp, ' ');
    }
    }
    
    function toggleClassName(inElement, inClassName)
    {
    if (hasClassName(inElement, inClassName))
    removeClassName(inElement, inClassName);
    else
    addClassName(inElement, inClassName);
    }
    
    function toggleShape()
    {
    var shape = document.getElementById('shape');
    if (hasClassName(shape, 'ring')) {
    removeClassName(shape, 'ring');
    addClassName(shape, 'cube');
    } else {
    removeClassName(shape, 'cube');
    addClassName(shape, 'ring');
    }
    
    // Move the ring back in Z so it's not so in-your-face.
    var stage = document.getElementById('stage');
    if (hasClassName(shape, 'ring'))
    stage.style.webkitTransform = 'translateZ(-200px)';
    else
    stage.style.webkitTransform = '';
    }
    
    function toggleBackfaces()
    {
    var backfacesVisible = document.getElementById('backfaces').checked;
    var shape = document.getElementById('shape');
    if (backfacesVisible)
    addClassName(shape, 'backfaces');
    else
    removeClassName(shape, 'backfaces');
    }
</script>

<div class="controls">
    <p>Click Toggle Shape to switch between nested cubes and one big ring.</p>
    <div><button onclick="toggleShape()">Toggle Shape</button></div>
    <div><input type="checkbox" id="backfaces"...

CSS

body {
    background-color: black;
    color: white;
    font-family: 'Lucida Grande', Verdana, Arial;
    font-size: 12px;
    background-image: -webkit-gradient(radial,
        50% 500, 1,
        50% 500, 400,
        from(rgba(255, 255, 255, 0.3)),
        to(rgba(255, 255, 255, 0)));
    background-repeat: no-repeat;
}

#container {
    width: 100%;
    height: 700px;
    -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
    -webkit-perspective-origin: 50% 225px;
}
#stage {
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 2s;
    -webkit-transform-style: preserve-3d;
}

#shape {
    position: relative;
    top: 160px;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    -webkit-transform-style: preserve-3d;
}

.plane {
    position: absolute;
    height: 200px;
    width: 200px;
    border: 1px solid white;
    -webkit-border-radius: 12px;
    -webkit-box-sizing: border-box;
    text-align: center;
    font-family: Times, serif;
    font-size: 124pt;
    color: black;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-transition: -webkit-transform 2s, opacity 2s;
    -webkit-backface-visibility: hidden;
}

#shape.backfaces .plane {
    -webkit-backface-visibility: visible;
}

#shape {
    -webkit-animation: spin 8s infinite linear;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0); }
to   { -webkit-transform: rotateY(-360deg); }
}

/* ---------- cube styles ------------- */
.cube > .one {
    opacity: 0.5;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}

.cube > .two {
    opacity: 0.5;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}

.cube > .three {
    opacity: 0.5;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}

.cube > .four {
    opacity: 0.5;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}

.cube > .five {
    opacity:...