JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="first">
<a href="#">
<div class="sprite_face_shift">
</div>
</a>
<a href="#">
<div class="sprite_rss_shift">
</div>
</a>
<a href="#">
<div class="sprite_linked_shift">
</div>
</a>
<a href="#">
<div class="sprite_pint_shift">
</div>
</a>
<a href="#">
<div class="sprite_share_shift">
</div>
</a>
<a href="#">
<div class="sprite_youtube_shift">
</div>
</a>
<a href="#">
<div class="sprite_twitter_shift">
</div>
</a>
</div>

CSS

/* first */

.first{
width: 440px;
height: 100px;
}

.sprite_face_shift {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position:0 0;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_face_shift:hover {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position: -1px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_rss_shift {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position:-57px 0;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_rss_shift:hover {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position:-57px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_linked_shift {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position: -114px 0;
width: 50px;
height: 50px;
float:left;
margin-right: 10px;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_linked_shift:hover {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png');
background-position: -114px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_pint_shift {
background: url('http://www.aorank.com/tutorial/image_sprite_demo/imgs/image_sprites.png') ;
background-position: -171px 0;
width: 50px;
height: 50px;
float:left;
margin-right: 10px;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_pint_shift:hover {
background:...