Tranform rotate with degrees in the same rotation-CodePudding

I am trying to rotate a cube with keyframes so it keeps rotating in the same direction with no rotation backwards and keeps rotating horizontally in one direction without reverse on infinite.

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CSS degrees run over 360 and don't seem to stop... As you can see with the current keyframes the cube will rotate backwards, is there a solution to keep it going with CSS?

.cube {
  width: 250px;
  height: 250px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(315deg) rotateY(-45deg);
  animation: rotate-cube 5s infinite;
  margin-bottom: 50px;
  cursor: pointer;
}
.cube-face {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 250px;
  height: 250px;
  border: 2px solid black;
  font-size: 90px !important;
  font-weight: bold;
  color: #000;
}
.cube .front {
  background: #f15d2a;
  transform: rotateY(0deg) translateZ(125px);
}
.cube .right {
  background: #0063a6;
  transform: rotateY(90deg) translateZ(125px);
}
.cube .back {
  background: #ed1652;
  transform: rotate(0deg) rotateY(180deg) translateZ(125px);
}
.cube .left {
  background: #12b259;
  transform: rotateX(0) rotateY(-90deg) translateZ(125px);
}
.cube .top {
  background: #fff;
  transform: rotateY(0deg) rotateX(90deg) translateZ(125px);
}
.cube .bottom {
  background: #ffd54c;
  transform: rotatey(90deg) rotateX(-90deg) translateZ(125px);
}
@keyframes rotate-cube {
  0% {
    transform: rotateX(315deg) rotateY(-45deg);
  }
  33.33% {
    transform: rotateX(315deg) rotateY(-135deg);
  }
  66.66% {
    transform: rotateX(315deg) rotateY(-225deg);
  }
  100% {
    transform: rotateX(315deg) rotateY(-45deg);
  }
}

See example on codepen

CodePudding user response：

Assuming you want the end and start to have the same rotation, you can set the final rotation to -405deg (360 45).

This should make sure the animation continues in the correct direction.

    0% {
      transform: rotateX(315deg) rotateY(-45deg);
    }

    33.33% {
      transform: rotateX(315deg) rotateY(-135deg);
    }

    66.66% {
      transform: rotateX(315deg) rotateY(-225deg);
    }

    100% {
      transform: rotateX(315deg) rotateY(-405deg);
    }