JSFiddle - React, Tailwind, and code Playground

by Ena M

HTML

<div id="rotation1">link 1</div>
<div id="rotation2">link 2</div>
<div id="rotation3">link 3</div>
<div id="rotation4">link 4</div>
<div id="zeiger"></div>

CSS

#rotation1 {
background-image: url('http://www.imgbox.de/users/canaika/blue_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 100px;
left: 300px;
}




#rotation1:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;z-index:1;
-webkit-transform: rotate(45deg),;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}





#rotation2 {
background-image: url('http://www.imgbox.de/users/canaika/pink_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 100px;
left: 412px;
}



#rotation2:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
position: fixed;
top: 100px;
left: 300px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
z-index:1;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}


#rotation3 {
background-image: url('http://www.imgbox.de/users/canaika/yellow_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 212px;
left: 300px;}



#rotation3:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
position: fixed;
top: 100px;
left: 300px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
z-index:1;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s...