css中的3D车轮旋转效果

Question

我正在尝试构建一个简单的网络元素，类似于参赛者在 The Price is Right (sample video) 上旋转的轮子。我的问题是：有没有比我在下面拼凑出来的更有效的方法来实现这种效果？

我对这个功能的第一次尝试基本上是减少包含要旋转的元素的元素的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

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

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