<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>CSS 3D FLIP BOX</h1> <h3>Flipping content to a div (Transitions and 3D Transforms)</h3> <div class="wrapper"> <div class="col_third"> <div class="hover panel"> <div class="front"> <div class="box1"> <p>Front Side</p> </div> </div> <div class="back"> <div class="box2"> <p>Back Side</p> </div> </div> </div> </div> <div class="col_third"> <div class="hover panel"> <div class="front"> <div class="box1"> <p>Front Side</p> </div> </div> <div class="back"> <div class="box2"> <p>Back Side</p> </div> </div> </div> </div> <div class="col_third end"> <div class="hover panel"> <div class="front"> <div class="box1"> <p>Front Side</p> </div> </div> <div class="back"> <div class="box2"> <p>Back Side</p> </div> </div> </div> </div> </div>

p { color: #ffffff; } /*-=-=-=-=-=-=-=-=-=-*/ /* Column Grids */ /*-=-=-=-=-=-=-=-=-= */ .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /*-=-=-=-=-=-=-=-=-=-=- */ /* Flip Panel */ /*-=-=-=-=-=-=-=-=-=-=- */ .wrapper{ width: 980px; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;} .panel { margin: 0 auto; height: 130px; position: relative; -webkit-perspective: 600px; -moz-perspective: 600px; } .panel .front, .panel .back { text-align: center; } .panel .front { height: inherit; position: absolute; top: 0; z-index: 900; text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel .back { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); } .box1{ background-color: #d52685; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .box2{ background-color: #ffcc00; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

$(document).ready(function(){ // 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'); }); });