CSS中的3D车轮旋转效果

Question

我正在尝试构建一个简单的Web元素，该元素类似于车轮参赛者在Price Price Right（ 示例视频 ）上旋转的信息。 我的问题是：是否有比我下面拼凑的更有效的方法来达到这种效果？

我对此功能的首次尝试基本上减少了包含要旋转的元素的元素的translateY属性[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> 

有没有更有效的方法来实现此功能？ 我是否可以创建一个具有n个子元素的元素，并实际上仅在Z维度上旋转它们，而不是像上面所做的那样创建人工旋转？ 其他人在这个问题上可以提供的任何指导将不胜感激！

Answer 1

看看http://desandro.github.io/3dtransforms/examples/carousel-02-dynamic.html

我认为这几乎就是您所需要的。 并且还附带了一个教程： http : //desandro.github.io/3dtransforms/docs/carousel.html

Answer 2

您可以为此使用css-animations ：（它们可能更有效）

 /* 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>