Simple CSS flipping card

Flipping Card with icons social red con CSS y Html

By  BY Dmitry Korobov

HTML

<div class="card">
 <div class="card-front"></div>
 <div class="card-back">
 <h2>Jane Doe<br><span>Senior Designer</span></h2>
 <div class="social-icons">
 <a href="#" class="fa fa-facebook" aria-hidden="true"></a>
 <a href="#" class="fa fa-twitter" aria-hidden="true"></a>
 <a href="#" class="fa fa-google-plus" aria-hidden="true"></a>
 <a href="#" class="fa fa-linkedin" aria-hidden="true"></a>
 <a href="#" class="fa fa-instagram" aria-hidden="true"></a>
 </div>
 </div>
 </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
body{margin:0;padding:0;font-family:"Josefin Sans",sans-serif;background-color:#eee}
body a{color:#fff;text-decoration:none}
.card{position:absolute;top:50%;left:50%;height:400px;width:300px;transform:translate(-50%,-50%);transform-style:preserve-3d;perspective:600px;transition:.5s}
.card:hover .card-front{transform:rotateX(-180deg)}
.card:hover .card-back{transform:rotateX(0deg)}
.card-front{height:100%;width:100%;background-image:url(https://99px.ru/sstorage/56/2013/12/image_563012130153328414049.jpg);background-position:50% 50%;background-size:cover;position:absolute;top:0;left:0;background-color:#000;backface-visibility:hidden;transform:rotateX(0deg);transition:.5s}
.card-back{height:100%;width:100%;position:absolute;top:0;left:0;background-color:#000;backface-visibility:hidden;transform:rotateX(180deg);transition:.5s;color:#fff;text-align:center}
.card-back h2{margin:60% auto 35%;font-size:26px}
.card-back h2 span{font-size:20px}
.card-back a{height:20px;width:20px;padding:5px;border-radius:4px;line-height:20px}
.card-back a:hover{color:#000;background-color:#fff}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

shopping card
Add to cart - carrito de compra
Flip Card CSS Effect Horizontal Vertical