<div class="raw"> <div class="flip-container" > <div class="flipper"> <div class="front"> <i class="fa fa-vk">hover me </i> </div> <div class="back"> <p>jsfiddle</p> </div> </div> </div> <div class="flip-container" > <div class="flipper"> <div class="front"> <i class="fa fa-facebook">hover me </i> </div> <div class="back"> <p>facebook</p> </div> </div> </div> <div class="flip-container" > <div class="flipper"> <div class="front"> <i class="fa fa-codepen">hover me </i> </div> <div class="back"> <p>codepen</p> </div> </div> </div> <div class="flip-container" > <div class="flipper"> <div class="front"> <i class="fa fa-github">hover me </i> </div> <div class="back"> <p>github</p> </div> </div> </div> </div>
@font-face { font-family: 'Kaushan Script'; font-style: normal; font-weight: 400; src: local('Kaushan Script'), local('KaushanScript-Regular'), url(http://fonts.gstatic.com/s/kaushanscript/v4/qx1LSqts-NtiKcLw4N03IO87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Kaushan Script'; font-style: normal; font-weight: 400; src: local('Kaushan Script'), local('KaushanScript-Regular'), url(http://fonts.gstatic.com/s/kaushanscript/v4/qx1LSqts-NtiKcLw4N03IOCxcENHzeph3q_bnZkaszo.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } body { background: #333; } .raw { height: 120px; width: 500px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .flip-container, .front, .back { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 30px; border-radius: 20px; } .flip-container { float: left; margin: 10px; -webkit-perspective: 1000; perspective: 1000; } /* turning on hover */ .flip-container:hover .flipper { transform: rotateY(-180deg); } .flipper { transition: transform .5s ease-in; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .front, .back { backface-visibility: hidden; position: absolute; left: 0; top: 0; } .front { background: tomato; color: white; z-index: 2; } .front .fa { display: inline-block; font-size: 20px; text-rendering: auto; -webkit-font-smoothing: antialiased; } .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .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; }