JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='list'>
    <li class='item'><div class='one'></div><a href='#'>hover</li>
    <li class='item'><div class='two'></div><a href='#'>hover</li>
    <li class='item'><div class='three'></div><a href='#'>hover</li>
</ul>

CSS

.list{
    padding:0;
}
.item{
    list-style:none;
    background:#ccc;
    margin-bottom:10px;
    width:200px;
    padding:20px;
}
.one, .two, .three{
    width:100px;
    height:68px;
    display:inline-block;
    vertical-align:middle;
}
.one{
    background:url(http://www.smashingmagazine.com/images/css-sprites/dragon.jpg) no-repeat;
}
.two{
     background:url(http://www.smashingmagazine.com/images/css-sprites/dragon.jpg) 0 -69px;
}
.three{
    background:url(http://www.smashingmagazine.com/images/css-sprites/dragon.jpg) 0 -209px;
}
.item div{
    border-radius:0;
    margin-right:0; 
    line-height:0;
    vertical-align:middle;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition:all 1s;
}
.item:hover{
    margin-right:10px;
    border-radius:100%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}