CSS rotation by 360 degrees

Question

I want to rotate a rectangle by an angle of 360 degrees (or even > 360 degrees) using CSS. The center of the rotation is "right center". If I use the following CSS code for a rotation by 180 degrees (and trigger the rotation with JavaScript) it works fine:

.animated.rotation {
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

@keyframes rotation {
      from {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }

to {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

.rotation {
  animation-name: rotation;
}

However, if I replace the 180 degrees by an angle >= 360 degrees it won't work anymore. For example in the case of 360 degrees nothing happens because the starting position is equal to the end position of the rotation.

How can I implement rotations by 360 degrees or more?

Answer 1

As we don't have a working code snippet, I here made one up with the posted CSS, and you should be able to do like this

 div { width: 50px; height: 50px; border: 1px solid black; border-top-left-radius: 10px; margin: 50px; } .animated.rotation { -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: rotation; animation-name: rotation; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; transform-origin: right center; } @keyframes rotation { from { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } 

 <div class="animated rotation"></div>