tile rotate 3d metro style

by lovromar

HTML

<div class="tile panel flip-container">
    <div class="flipper">
        <div class="front">
            <div class="pad">
                <img src="http://placehold.it/130x130/123123/ffff99" alt="logo front" />
            </div>
        </div>
        <div class="back">
            <div class="pad">
                <img src="http://placehold.it/130x130/ffff99/123123" alt="logo back" />
            </div>
        </div>
    </div>
    <hr />
    <div class="flipper">
        <div class="front">
            <img src="http://placehold.it/130x130/123123/ffff99" alt="logo front" />
        </div>
        <div class="back">
            <div class="pad">
                <img src="http://placehold.it/130x130/ffff99/123123" alt="logo back" />
            </div>
        </div>
    </div>
</div>

CSS

/* entire container, keeps perspective */
 .flip-container {
 /*   width: 100%;*/
    border:dotted 1px #f90;
    
}
.flip-container .flipper {
position: relative;
    border:dashed 1px #0f0;
    display:block;
   /* float:left;*/
    width:130px;
    height:130px;
}
/* hide back of pane during swap */
 .flip-container .flipper .front, .flip-container .flipper .back {
    left: 0;
  position: absolute;
    top: 0;
    /*width: 100%;*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(1000px) rotateY(180deg);
    -moz-transform: perspective(1000px) rotateY(180deg);
    -o-transform: perspective(1000px) rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg);
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}
/* front pane, placed above back */
 .flip-container .flipper .front {
    z-index: 2;
    -webkit-transform: perspective(1000px) rotateY(0);
    -moz-transform: perspective(1000px) rotateY(0);
    -o-transform: perspective(1000px) rotateY(0);
    transform: perspective(1000px) rotateY(0);
}
/* front pane, placed above back */
 .flip-container:hover .flipper .front {
    -webkit-transform: perspective(1000px) rotateY(-179.9deg);
    -moz-transform: perspective(1000px) rotateY(-179.9deg);
    -o-transform: perspective(1000px) rotateY(-179.9deg);
    transform: perspective(1000px) rotateY(-179.9deg);
}
/* back, initially hidden pane */
 .flip-container:hover .flipper .back {
    -webkit-transform: perspective(1000px) rotateY(0);
    -moz-transform: perspective(1000px) rotateY(0);
    -o-transform: perspective(1000px) rotateY(0);
    transform: perspective(1000px) rotateY(0);
}

JavaScript

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