Responsive Flip Card – Attractive design for grid systems by rotating your card

Responsive Flip Card – New and attractive design for grid systems using bootstrap and some simple css tricks and hacks.

By this you can show your content very beautifully when you have too much information to show to the user.

Note – This post is only to share for flipping the card, but you can add or customize the design of the tile according to your requirement.

Screen Shot for flip card

Import bootstrap.css, it is not required but I used it for columns and thumbnail, You can replace it with your own css framework.

I used Bootstrap for the 12-col grid. It helps us to keep the flip card responsive for any screen size and device.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

CSS Trick and hack for flipping the card. Please add following style sheet class to your page to take benefits of it.

CSS-

<style>

     .card-container:hover .card{

           -webkit-transform: rotateY( 180deg );

           -moz-transform: rotateY( 180deg );

           -o-transform: rotateY( 180deg );

           transform: rotateY( 180deg );

     }

     .card-container.static.hover .card {

           -webkit-transform: none;

           -moz-transform: none;

           -o-transform: none;

           transform: none;

     }

     /*BY this you can maintain the time for flipping the card*/

     .card {

           -webkit-transition: -webkit-transform .6s;

           -moz-transition: -moz-transform .6s;

           -o-transition: -o-transform .6s;

           transition: transform .6s;

           -webkit-transform-style: preserve-3d;

           -moz-transform-style: preserve-3d;

           -o-transform-style: preserve-3d;

           transform-style: preserve-3d;

           position: relative;

     }

     .front, .back {

           -webkit-backface-visibility: hidden;

           -moz-backface-visibility: hidden;

           -o-backface-visibility: hidden;

           backface-visibility: hidden;

           position: absolute;

           top: 0;

           left: 0;

           background-color: #FFF;

           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

     }

     .back {

           -webkit-transform: rotateY( 180deg );

           -moz-transform: rotateY( 180deg );

           -o-transform: rotateY( 180deg );

           transform: rotateY( 180deg );

           z-index: 4;

     }

     .card-container, .front, .back {

           width: 100%;

           height: 400px;

           border-radius: 4px;

     }

                               

     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

           .front, .back{

                -ms-backface-visibility: visible;   

                backface-visibility: visible;

          }

                    

          .back {

                visibility: hidden;

                -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);

          }

           .front{

                z-index: 4;

           }

           .card-container:hover .back{

                z-index: 5;

                visibility: visible;

           }

     }

     </style>            

    

Here I used container, row and col-md-4 from bootstrap which is generally used for responsive grid system. I also used thumbnail class which is again from bootstrap.css

Card has two views one is front and another back.

HTML-

<div class="container">

     <div class="row">

           <div class="col-md-4">

                <div class="card-container">

                     <div class="card">

                           <div class="front thumbnail">             

                                <img src="../cover_img.jpg">

                                <div class="caption">

                                     <h3>Thumbnail label</h3>

                                     <p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox..</p>

                                </div>

                           </div>

                           <div class="back thumbnail">

                                <div class="caption">

                                     <h3>Thumbnail label</h3>

                                     <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!...</p>

                                     <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>

                                </div>                              

                           </div>

                     </div>

                </div>

           </div>                    

     </div>

</div>    

So, here we completed flip the card with simple html and some css3’s 3D rotating action. Rock your project with flip card effects. The users will be pleasantly surprised and appreciate your work, for sure!

You can get combined code from this link Get combined code here