JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stick"></div>
    <div class="ball"></div>

CSS

body{
    perspective:200px;
}
.stick{
    position:absolute;
    top:10px;
    left:50%;
    margin-left:-2px;
    width:4px;
    height:100px;
    background:black;
}
.ball{
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-10px;
    height:20px;
    width:20px;
    border-radius:99px;
    background:red;
    -webkit-animation:myRotate 5s linear infinite;
}
@-webkit-keyframes myRotate{
    0%{
        -webkit-transform:rotateY(0deg) translateX(100px) rotateY(360deg);
    }
    100%{
        -webkit-transform:rotateY(360deg) translateX(100px) rotateY(0deg);
    }
}