JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="karsanulpogman daskitan">
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/rss-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/twitter-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/facebook-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/google-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/stumble-heart.png" /></span></a></li>
</ul>

CSS

ul.karsanulpogman {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    perspective: 10000px;
}

ul.karsanulpogman li {
    margin: 0;
    display: block;
    width: 99px;
    height: 99px;
    margin-bottom: 0;
    background: #fdf7f7;
    text-transform: uppercase;
    text-align: center;
}

ul.karsanulpogman li a{
display:table;
font: bold 35px Arial; 
width: 99%;
height: 99%;
color: black;
background: #4d9fce;
text-decoration: none;
outline: none;
-webkit-transition:all 299ms ease-out;
-moz-transition:all 299ms ease-out;
transition:all 299ms ease-out;
}

ul.karsanulpogman li:hover a{
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #a4cbd4;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.daskitan li a {
    background: rgba(239, 239, 239, 0) !important;
}

ul.daskitan li a:hover{
    background: rgba(187, 182, 182, 0) !important;
}