Social Cards

CSS3 Social Cards

HTML

<div id="container">
    <div class="flip">
        <img src="http://vihan.ml/p/img/sets/social/youtube.png" />
        <div>YouTube</div>
         <div>Tube</div>
       </div>
</div>

CSS

#container {
    -webkit-perspective: 800;
}
.flip {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s ease;
    background-color: red;

    height: 5em;

    width: 5em;

    padding: 1em;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    line-height: 6em;
    cursor: pointer;

}

.flip>img {
z-index: 2;
    position: absolute;

    top: 50%;

    -webkit-transform: translateY(-50%);

    width: 5em;

}
.flip:hover{-webkit-transform:rotateY(180deg);}
.flip>*{
    -webkit-backface-visibility: hidden;
    position:absolute;
}
.flip>div{
-webkit-transform: rotateY(180deg);
    text-align:center;
    height: 5em;
    width: 5em;
}