3D Transform

by helpinspireme

HTML

<div class="hover panel">
        <div class="front">
            <h2>Mouse Over Me!</h2>
            <p>This can be done using 100% CSS. Most of this other stuff requires some Javascript, although the animation is CSS.</p>
        </div>
        <div class="back">
            <div class="pad">
                <h2>check you on the flip side</h2>
            </div>
        </div>
    </div>

CSS

.panel {
            float: left;
            width: 90%;
            height: 250px;
            position: relative;
            
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
        }
        /* -- make sure to declare a default for every property that you want animated -- */
        /* -- general styles, including Y axis rotation -- */
        .panel .front {
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 900;
            width: inherit;
            height: inherit;
            border: 1px solid #ccc;
            background: #6b7077;
            text-align: center;

            -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
            -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
            box-shadow: 0 1px 5px rgba(0,0,0,0.9);
            
            -webkit-transform: rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;

            -moz-transform: rotateY(0deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;

            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }
        .panel.flip .front {
            z-index: 900;
            border-color: #eee;

            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            
            -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
            -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
            box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        }
        
        .panel .back {
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 800;
 ...

JavaScript

$('.hover').hover(function() {
    $(this).addClass('flip');
}, function() {
    $(this).removeClass('flip');
});