<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="card"> <div class="content"> <div class="front"> tested </div> <div class="back"> Back! </div> </div> </div>

@import 'https://fonts.googleapis.com/css?family=Lily+Script+One'; body { background: #eee; font-family: 'Lily Script One'; } .card { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px; float: left; perspective: 500px; } .content { position: absolute; width: 100%; height: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: transform 1s; transform-style: preserve-3d; } .card:hover .content { transform: rotateY( 180deg ) ; transition: transform 0.5s; } .front, .back { position: absolute; height: 100%; width: 100%; background: white; line-height: 300px; color: #03446A; text-align: center; font-size: 60px; border-radius: 5px; backface-visibility: hidden; } .back { background: #03446A; color: white; transform: rotateY( 180deg ); }