<div class="container mt-5 mb-5 d-flex justify-content-center">
<ul class="social-list">
<li>
<div class="maincard p-3">
<div class="thecard">
<div class="thefront text-center py-4 facebook">
<div class="social-icon"> <i class="fa fa-facebook fa-2x"></i> </div>
</div>
<div class="theback py-3 px-3 text-center facebook">
<div class="social-text mt-1"> <small class="font-weight-bold">Facebook</small> </div>
</div>
</div>
</div>
</li>
<li>
<div class="maincard p-3">
<div class="thecard">
<div class="thefront text-center py-4 instagram">
<div class="social-icon"> <i class="fa fa-instagram fa-2x"></i> </div>
</div>
<div class="theback py-3 px-3 text-center instagram">
<div class="social-text mt-1"> <small class="font-weight-bold">Instagram</small> </div>
</div>
</div>
</div>
</li>
<li>
<div class="maincard p-3">
<div class="thecard">
<div class="thefront text-center py-4 youtube">
<div class="social-icon"> <i class="fa fa-youtube fa-2x"></i> </div>
</div>
<div class="theback py-3 px-3 text-center youtube">
<div class="social-text mt-1"> <small class="font-weight-bold">Youtube</small> </div>
</div>
</div>
</div>
</li>
<li>
<div class="maincard p-3">
<div class="thecard">
<div class="thefront text-center py-4 whatsapp">
<div class="social-icon"> <i class="fa fa-whatsapp fa-2x"></i> </div>
</div>
<div class="theback py-3 px-3 text-center whatsapp">
<div class="social-text mt-1"> <small class="font-weight-bold">Whatsapp</small> </div>
</div>
</div>
</div>
</li>
<li>
<div class="maincard p-3">
<div class="thecard">
<div class="thefront text-center py-4 pinterest">
<div class="social-icon"> <i class="fa fa-pinterest fa-2x"></i> </div>
</div>
<div class="theback py-3 px-3 text-center pinterest">
<div class="social-text mt-1"> <small class="font-weight-bold">Pinterest</small> </div>
</div>
</div>
</div>
</li>
</ul>
</div>
body {
background-color: #f7f6f6
}
.social-list {
display: inline-flex
}
.social-list li {
list-style: none;
margin-right: 10px
}
.maincard {
position: relative;
width: 120px;
height: 80px
}
.thecard {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.8s ease
}
.thecard:hover {
transform: rotateY(180deg)
}
.thefront {
position: absolute;
width: 100%;
height: 100%;
background-color: hidden;
color: #fff;
border-radius: 10px;
cursor: pointer;
border: 1px solid #eee;
box-shadow: 5px 6px 6px 2px #e9ecef;
padding: 4px
}
.theback {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
background-color: hidden;
color: #fff;
border-radius: 10px;
transform: rotateY(180deg);
border: 1px solid #eee;
box-shadow: 5px 6px 6px 2px #e9ecef;
padding: 4px
}
.social-text small {
font-size: 20px
}
@media (max-width:700px) {
.social-list {
display: block
}
}
.facebook {
background: #3b5998
}
.instagram {
background: #3f729b
}
.youtube {
background: #ff0000
}
.whatsapp {
background: #4dc247
}
.pinterest {
background: #cb2027
}