css3 flipper

by James Doyle

HTML

<div>
        <article class="item">
            <div class="picture">
                <img src="http://labs.daryl.im/flipper/img/rogie.png" width="174" height="174" style="display: none; ">
                <div class="underlay">
                    <a class="i"></a>
                    <a class="r"></a>
                    <a class="d"></a>
                </div>
                            <div class="slits">                   <div><b></b><em></em><img src="http://labs.daryl.im/flipper/img/rogie.png"></div>                   <div><b></b><em></em><img src="http://labs.daryl.im/flipper/img/rogie.png"></div>                 </div>                 <b></b></div>
        </article>
    </div>

CSS

body { margin: 2em; }

img { vertical-align: middle; }

    .item {
        width: 174px;
    }
    
    .item .picture {
        width: 174px;
        height: 174px;
        position: relative;
        border-radius: 3px;
        background: rgba(0,0,0,0.3);
        -webkit-backface-visibility: hidden;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.5),
                    0 1px 4px rgba(0,0,0,0.7),
                    0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    
    /* Default image */
    .item .picture img {
        border-radius: 3px;
        position: relative;
        z-index: 50;
    }
    
    /* Shadow */
    .item .picture > b {
        position: absolute;
        top: 99%; left: 0;
        right: 0; bottom: 0;
        border-radius: 100%;
        background: #000;
        box-shadow: 0 0 20px 10px #000;
        opacity: 0;
        -webkit-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -moz-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -o-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -ms-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
    }
    
    /* Slits wrap */
    .item .picture .slits {
        position: absolute;
        top: 0; right: 0; 
        bottom: 0; left: 0;
        z-index: 40;
        -webkit-perspective: 700px;
        -moz-perspective: 700px;
        pointer-events: none;
    }
    
    /* Slit Style + Positioning */
    .item .picture .slits > div {
        position: absolute;
        top: 0; left: 0; 
        right: 0; bottom: 50%;
        overflow: hidden;
        -webkit-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -moz-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -o-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -ms-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: top;
        -o-transform-origin: 50%...