每隔幾秒旋轉一次物件-有解無憂

我拿了這支筆：https ://codepen.io/golle404/pen/BoqrEN并想讓它每隔幾秒鐘移動一次。

我試過這個：

setTimeout(function() {
    document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);

但這會移動物體一次，我想讓立方體無限旋轉 3 檔。

所以就像立方體旋轉到 203 度，應該在那里停留 2 秒并移動到 180 度，例如 - 在無限回圈中。

有沒有辦法做到這一點？或者是不可能的。

uj5u.com熱心網友回復：

您可以為此使用關鍵幀影片。

例如：

@keyframes rotation {
  0%, 100% {
    transform: rotateX(90deg) translateZ(-150px);
  }
  
  33.333% {
    transform: translateZ(150px);
  }
  
  66.666% {
    transform: rotateY(90deg) translateZ(150px);
  }
}

然后你像這樣使用它

.my-element {
  animation: rotation 5s infinite;
}

這里結合了您來自 codepen 的代碼：

.container {
  margin-top: 150px;
}

.news-grid {
  width: 300px;
  margin: auto;
}

.news-card {
  width: 300px;
  height: 300px;
  perspective: 800px;
  perspective-origin: 50% 50%;
  outline: 1px solid blue;
}

.face>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#experiment {
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective: 800px;
  -moz-perspective-origin: 50% 200px;
  perspective: 800px;
  perspective-origin: 50% 200px;
}

.cube {
  position: relative;
  margin: auto;
  height: 300px;
  width: 300px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(245deg);
  animation: rotation 5s infinite;
}

.face {
  position: absolute;
  height: 260px;
  width: 260px;
  padding: 20px;
  background-color: rgba(50, 50, 50, 0.7);
  font-size: 27px;
  line-height: 1em;
  color: #fff;
  border: 1px solid #555;
  border-radius: 3px;
}

@keyframes rotation {
  0%,
  100% {
    transform: rotateX(90deg) translateZ(-150px);
  }
  33.333% {
    transform: translateZ(150px);
  }
  66.666% {
    transform: rotateY(90deg) translateZ(150px);
  }
}

<div class="container">
  <div class="news-grid">
    <div class="news-card">
      <div class="cube">
        <div class="face one"></div>
        <div class="face two">
          <img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
        <div class="face three">
          Information Architecture 101: Techniques and Best Practices
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

你需要使用setInterval，而不是setTimeout

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476436.html

標籤：javascript html css

上一篇：每5秒隨機顏色

下一篇：渲染不同組件時無法更新組件