JSFiddle - React, Tailwind, and code Playground
HTML
<div id="axis" class="five">
<img class="object plane van move-ne scala kolo" alt=" ">
</div>
CSS
.object {
position: absolute;
transition: all 2s linear: ;
-webkit-transition: all 2s ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 2s ease-in-out;
/** Firefox **/
-o-transition: all 2s ease-in-out;
/** Opera **/
}
.kolo {
top: 0.1%;
left: 0%;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
}
.van {
top: 89%;
left: 0%;
}
.plane {
position: absolute;
left: 10px;
bottom: 10px;
}
#axis:hover .move-ne {
transform: translate(1624px, -850px);
}
#axis:hover .scala {
transform: scale(2);
transition: all 0.5s ease-out;
}
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
/*
@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) } }*/