Rotate an element using CSS

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 10748
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Fri Oct 16, 2020 1:16 pm

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,
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply