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?

Since you are using keyframes, you need to set the animation duration developer.mozilla.org/en-US/docs/Web/CSS/animation — Jordan Soltman
Yes, I also set an animation duration:.animated.rotation { -webkit-animation-duration: 9s; animation-duration: 9s; } However, this does not work for 360 degrees. — Tall83
Thank you very much LGSon! Now everything is working fine! Sorry for answering that late, I had just forgotten to mark your answer as correct. So thanks again for helping me! — Tall83

Ason Ason · Accepted Answer · 2017-02-12T19:22:45

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>

CSS rotation by 360 degrees

1 Answers