Rotate Object every few seconds

Issue

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.

Solution

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>

Answered By - The Fool