CSS3 Transforms: Creepy Box

A bit of JS and styling turns a CSS3 cube into a creepy bearer of ominous fortune.

by nate

HTML

<div class="skull"></div>
<div class="tree"></div>

<section class="container">
    <div class="inner">
        <div id="cube">
            <figure class="front" data-rotate="rotateY( 0deg ) ">&#9760;</figure>
            <figure class="back" data-rotate="rotateX( 180deg ) ">to</figure>
            <figure class="right" data-rotate="rotateY( 90deg ) ">told</figure>
            <figure class="left" data-rotate="rotateY( -90deg ) ">me</figure>
            <figure class="top fin" data-rotate="rotateX( 90deg ) ">to</figure>
            <figure class="bottom" data-rotate="rotateX( -90deg ) ">pick</figure>
        </div>
    </div>
</section>

<menu>
    <button>Receive Your Hallowe'en Fortune</button>
</menu>

<p class="support">Webkit Only</p>

CSS

/* We want some creepy fonts from Google */
@import url(https://fonts.googleapis.com/css?family=Creepster+Caps);
@import url(https://fonts.googleapis.com/css?family=Nosifer+Caps);

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: black;
    padding: 50px;
}

.skull {
    background-image: url( http://images.pombs.com/terrifying-skull.jpg );
    background-position: 50% 50%;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;

    -webkit-transition: opacity 10s;
       -moz-transition: opacity 10s;
            transition: opacity 10s;
}

.skull.on {
    opacity: 1;
}

.tree {
    background-image: url( http://images.pombs.com/haloil.jpg );
    background-position: 50% 50%;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;

    -webkit-transition: opacity 10s;
       -moz-transition: opacity 10s;
            transition: opacity 10s;
}

.tree.on {
    opacity: 1;
}


.container {
    height: 200px;
    margin: 0 auto;
    position: relative;
    width: 200px;

    -webkit-perspective: 1000;
       -moz-perspective: 1000;
            perspective: 1000;
    
    -webkit-transition: width 1s;
       -moz-transition: width 1s;
            transition: width 1s;
}

#cube {
    font-family: 'Creepster Caps', cursive;
    font-size: 72px;
    height: 100%;
    position: absolute;
    width: 100%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
    -webkit-transform: translateZ( -100px );
       -moz-transform: translateZ( -100px );
            transform: translateZ( -100px );
    
    -webkit-transition: -webkit-transform 1s;
       -moz-transition:    -moz-transform 1s;
            transition:         transform 1s;
}

.inner {
    height: 100%;
    width: 100%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style:...

JavaScript

// This could, of course, be made to work for Mozilla.
// It was just for fun.

(function( $ ) {

    $(function() {
        
        var $cube = $( '#cube' );

        $cube.find( 'figure' ).each(function( i, item ) {
            var $item = $( item );

            $item
                .wrapInner( '<span />' )
                .data( 'size', $item.children( 'span' ) );

        });


        $cube.delegate( 'figure', 'show', function( event ) {
            var $figure = $( event.target );

            // Increase the font size to fit in the available space
            maximizeFont( $figure );

            $cube
                // Remove existing classes
                .attr( 'class', '' )
                // Add a class to show the selected face
                .addClass( 'show-' + $figure.attr( 'class' ) );

            $cube.children( 'figure' ).removeClass( 'showing' );

            $figure.addClass( 'showing' );

        });

        function maximizeFont( $figure ) {
            var $span = $figure.children( 'span' ),
                fontSize = parseInt( $figure.css( 'font-size' ) ),
                tolerance = 50;

            if ( $span.width() > $figure.width() - ( tolerance / 2 ) || $span.height() > $figure.height() - ( tolerance / 2 ) ) {
                $figure.css( 'font-size', fontSize - 6 );  
                return maximizeFont( $figure );
            } else if ( $span.width() < $figure.width() - tolerance && $span.height() < $figure.height() - tolerance ) {
                $figure.css( 'font-size', fontSize + 6 );
                return maximizeFont( $figure );
            } else {
                $span.css( 'top', ( $figure.height() - $span.height() ) / 2 + 'px' );
                return true;
            }

        }

        $( document ).delegate( 'button', 'click', function( event ) {
            var $cube = $( '#cube' ),
                messages = [ 
                    "My mother told me to pick the very best one and you are it",
         ...