Flip CSS

by erick

HTML

<!-- from http://css3playground.com/flip-card.php -->

<div class="hover panel">
        <div class="front">
          <div class="pad">
      
              <img src='http://cdn.leonar.do/A608eea2fbd7f1e4f6182fdbabb7144ed/a8faffccb751496b81169ff1e87d110e.jpg'/>
            </div>
        </div>
        <div class="back">
            <div class="pad">
                <img src='http://cdn.leonar.do/A608eea2fbd7f1e4f6182fdbabb7144ed/ccc82b841733fda308e111f3c9723dd7.jpg'/>
            </div>
        </div>
    </div>

CSS

.panel .pad img {
    width: 100%;
    height: 100px;   
}
.panel {
            width: 200px;
            position: relative;
            font-size: .8em;
            -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 {
           
            position: absolute;
            top: 0;
            left: 0;
            z-index: 900;
            width: inherit;
            height: inherit;
            border: 1px solid #ccc;
            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: rotateX(0deg) rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;

            -moz-transform: rotateX(0deg) 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;
           ...

JavaScript

// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function() {
    $(this).addClass('flip');
}, function() {
    $(this).removeClass('flip');
});

// set up click/tap panels
$('.click').toggle(function() {
    $(this).addClass('flip');
}, function() {
    $(this).removeClass('flip');
});