<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"> <div class="row"> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"> <a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> <div class="card col-md-4 col-sm-6"> <div id="card-container"> <div id="card"> <div class="front"> <img class="card-img-top img-responsive img-thumbnail crossRotate" src="http://fizmasoft.uz/img/logos/fizmasoft.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Face detection</strong></h4> <p class="card-text"><a href="https://fizmasoft.uz">Fizmasoft.uz</a> Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="back"> <div class="card" style="width: 30rem; height: 35rem; border-radius: 5px;"> <div class="card-block"> <h4 class="card-title" style="text-align: center;"><strong>Back side</strong></h4> <p class="back-card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> </div> </div>

.card{ margin-top: 20px; } #card { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; width: 300px; height: 350px; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: 100%; height: 100%; font-family: Helvetica, Arial, sans-serif; color: #fff; font-weight: bold; box-shadow: inset 0px 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; text-align: center; padding: 5px; } .back { -webkit-transform: rotateY(180deg); background: url('http://www.inserthtml.com/goose.jpeg'); overflow: hidden; padding: 0 !important; } .back-card-text{ margin: 15px; } .front { background: #2d2d30; } .back{ background: #2d2d30; } #card-container { display: inline-block; text-align: justify; } #card-container:hover .back { -webkit-transform: rotateY(0deg); } #card-container:hover .front { -webkit-transform: rotateY(-180deg); }