3D wheel spinning effect in css

Question

I am trying to build a simple web element that resembles the wheel contestants spin on The Price is Right ( sample video ). My question is: is there a more efficient way to achieve this effect than what I've cobbled together below?

My first attempt at this functionality basically decrements the translateY property of an element that contains the elements to be spun [codepen] :

 setInterval(shiftCards, 100) var translateY = -60, cardIdx = 0, startCards = 60, wrap = document.querySelector('.wrap'); for (var i=0; i<startCards; i++) { addCard() } function addCard() { var div = document.createElement('div'); div.className = 'card'; div.style.top = (cardIdx * 12) + 'px'; wrap.appendChild(div); cardIdx++; } function shiftCards() { wrap.style.transform = 'translateY(' + translateY + 'px)'; translateY -= 12; var cards = wrap.querySelectorAll('.card'); if (cards.length >= startCards) { cards[0].parentNode.removeChild(cards[0]); addCard(); } } 

 .cards { width: 80px; height: 200px; overflow: hidden; background: #aaa; } .wrap { position: relative; transition: transform .25s; } .card { width: 100%; height: 10px; margin: 2px 0; background: red; position: absolute; left: 0; right: 0; } 

 <div class='cards'> <div class='wrap'> </div> </div> 

Is there a more efficient way to achieve this functionality? Can I create an element with n children and actually just spin them in the Z-dimension, rather than create an artificial spin as I've done above? Any guidance others can offer on this question will be very appreciated!

Answer 1

Have a look a http://desandro.github.io/3dtransforms/examples/carousel-02-dynamic.html

I thinks that's pretty much what you need. And it comes with a tutorial as well: http://desandro.github.io/3dtransforms/docs/carousel.html

Answer 2

You can use css-animations for this: (They are probably more efficient)

 /* only alignment */ body, html { height: 100%; margin: 0; padding: 0; } .wrapper { display:flex; justify-content:center; align-items:center; height: 100%; } /* actual spinning */ img { animation: spin 5s infinite linear; /* spin: the keyframes (=animation) we want to have 5s: how long it should take for one iteration infinite: how often should it repeat linear: the easing between the different key frames You can also try 'ease' */ } @keyframes spin { 0% {transform: translateY(-60px);} /* Starting point */ 100% {transform: translateY(-360px);} /* end point */ } @-webkit-keyframes spin { 0% {transform: translateY(-60px);} 100% {transform: translateY(-360px);} } 

 <div class="wrapper"> <img src="https://www.placecage.com/300/100" class="spin"> </div>