<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="raw"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <i class="fa fa-vk"></i> </div> <div class="back"> <p>vkontakte</p> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <i class="fa fa-facebook"></i> </div> <div class="back"> <p>facebook</p> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <i class="fa fa-codepen"></i> </div> <div class="back"> <p>codepen</p> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <i class="fa fa-github"></i> </div> <div class="back"> <p>github</p> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Kaushan+Script); body { background: #333; } .raw { height: 120px; width: 500px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* perspective */ .flip-container { perspective: 1000; margin: 10px; float: left; } /* turning on hover */ .flip-container:hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 30px; border-radius: 20px; } /* flipping speed here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* making the the other side hidden while flipping */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front side is in front of a back side */ .front { z-index: 2; background-color: tomato; color: white; } /* back side */ .back { transform: rotateY(180deg); background-color: lightblue; } .back p { font-size: 18px; margin-top: 0px; font-family: 'Kaushan Script', cursive; border: 1px solid white; border-radius: 20px; background-color: #333; color: white; }