Rotate Object every few seconds

Question

I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.

I tried this:

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

but this moves the object once and I want to make the cube spin infinite with 3 stops.

So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.

Is there a way to do it ? Or is it not possible.

Answer 1

You can use a keyframe animation for this.

For example:

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

And then you use it like this

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

Here it is in combination with your code from the 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>

Answer 2

您需要使用setInterval ，而不是setTimeout