CSS3 Transforms: Another Take

Use the cube animation from Creepy Box to make a more generic transform effect.

by nate

HTML

<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>

CSS

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

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

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

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

#cube {
    font-family: Futura, sans-serif;
    font-size: 72px;
    height: 100%;
    position: absolute;
    width: 100%;

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

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

    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY( 10deg ) rotateX( 10deg );
    -webkit-transition: -webkit-transform 5s linear;
}

#cube.show-front {
    -webkit-transform: translateZ( -100px ) rotateY( 0deg );
}

#cube.show-back {
    -webkit-transform: translateZ( -100px ) rotateX( 180deg );
}

#cube.show-right {
    -webkit-transform: translateZ( -100px ) rotateY( -90deg );
}

#cube.show-left {
    -webkit-transform: translateZ( -100px ) rotateY( 90deg );
}

#cube.show-top {
    -webkit-transform: translateZ( -100px ) rotateX( -90deg );
}

#cube.show-bottom {
    -webkit-transform: translateZ( -100px ) rotateX( 90deg );
}

figure {
    background-color: transparent;
    color: hsla( 0, 0%, 0%, 0 );
    display: block;
    height: 100%;
    margin: 0;
    position: absolute;
    text-align: center;
    text-shadow: none;
    width: 100%;

    -webkit-backface-visibility: hidden;
    -webkit-transition: text-shadow 1s, color 1s, background-color 1s, -webkit-transform 1s;
}

figure.showing {
    color: hsla( 0, 0%, 0%, 1 );
}

#cube .front {
    -webkit-transform: rotateY( 0deg ) translateZ( 100px );
}

#cube .back {
    -webkit-transform: rotateX( 180deg ) translateZ( 100px );
}

#cube .right {
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}

#cube .left {
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}

#cube .top {
    -webkit-transform:...

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( '#cube', 'mouseenter', function( event ) {
            var $cube = $( '#cube' ),
                messages = [ 
                    "My mother told me to pick the very best one and you are it",
     ...