<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 ----------> <div class="container-fluid"> <!-- Card 1 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 1 --> <!-- Card 2 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 2 --> <!-- Card 3 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 3 --> <!-- Card 4 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 4 --> <!-- Card 5 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 5 --> <!-- Card 6 --> <div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12"> <div class="card-container"> <div class="flipper"> <div class="front"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div> </div> </div> <div class="back"> <div class="panel panel-primary"> <div class="panel-heading">Lorem Ipsum Title</div> <div class="panel-body text-center"> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p> <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p> </div> </div> </div> </div> </div> </div> <!-- Card 6 --> </div>

.card-container { perspective: 1000px; -webkit-perspective: 1000px; -moz-perspective: 1000px; transform-style: preserve-3d; } .card-container.flipped .front { transform: rotateY(180deg); } .card-container.flipped .back { transform: rotateY(360deg); } .card-container, .front, .back { width: 100%; height: 250px; } .flipper { transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; transition: 3s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .front { z-index: 2; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); } .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); }

$(document).ready(function(){ //loads script after the page is loaded $('.card-container').click(function(){ // When the element card-container is click it triggers the function $(this).toggleClass("flipped"); // Finds the element and toggles the class called flipped to let you know the card is currently flipped or active $('.card-container .flipped').toggle("flipper"); // If the card-container element also contains the class flipped it will toggle the flip }); });