Page 1 of 1

Rotate an element using CSS

Posted: Fri Oct 16, 2020 1:16 pm
by Hopki
Hi,
If you have a need to have an element to continually rotate you can use CSS to achieve this.
It also works with 3D distorted point hotspots images.

Code: Select all

.ggskin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}
.ggskin.rotate {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
The time in seconds is how long it takes to rotate once, so 5s would be a lot slower than 2s.
In this case, any element that needs to rotate just needs the CSS Classes: rotate.
Regards,