Smooth Carousel Spinner

HTML
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
CSS
body { margin: 100px 0 0 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #222; } ul { position: relative; list-style: none; padding: 0; margin: 0; width: 100px; height: 50px; -webkit-perspective: 200; -webkit-transform-style: preserve-3d; -moz-perspective: 200; -moz-transform-style: preserve-3d; perspective: 200; transform-style: preserve-3d; } li { background: gold; position: absolute; width: 100px; height: 50px; transform-origin: center; transform: translate(0,-100px) rotateY(0); animation: rotate 1s linear infinite; } li:nth-child(2) { background: orange; animation-delay: .25s; } li:nth-child(3) { background: tomato; animation-delay: .5s; } li:nth-child(4) { background: orangered; animation-delay: .75s; } @keyframes rotate { 0 { transform: translate(0,-100px) rotateY(0); } 100% { transform: translate(0,-100px) rotateY(180deg); } }
JAVASCRIPT
Expand for more options Login