CSS
.container{
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card{
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover{
transform: rotateY(180deg);
}
.card .icon{
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back{
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
font-size: 1.2em;
margin: 0 15px
}