body{
background: #262626;
display: flex;
align-items: center;
justify-content: center;
}
.ring{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(500px) rotatex(60deg);
}
span{
position: absolute;
display: block;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 5px 0 #ccc, inset 0 5px 0 #ccc;
box-sizing: border-box;
animation: topdown 3s ease-in-out infinite;
}
@keyframes topdown{
0%{
transform: translateZ(-100px);
}
50%{
transform: translateZ(100px);
}
100%{
transform: translateZ(-100px);
}
}
