Solved Rotating homepage icons, gifs?


  • On this page, I like the way the coloured Sudonix wheel rotates when you click on it !
    Is this a gif file?
    In my nodebb forum can I just upload a gif into the settings for forum logo to get a similar effect?


  • @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

        @keyframes rotate180 {
            from {
              transform: rotate(0deg);
            }
           
            to {
              transform: rotate(180deg);
            }
          }
           
          @keyframes rotate0 {
            from {
              transform: rotate(180deg);
            }
           
            to {
              transform: rotate(0deg);
            }
          }
    

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo,
    img.forum-logo.head {
        max-height: 50px;
        width: auto;
        height: 30px;
        margin-top: 9px;
        max-width: 150px;
        min-width: 32px;
        display: inline-block;
        animation-name: rotate180, rotate0;
        animation-duration: 1000ms;
        animation-delay: 0s, 1000ms;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        transition: transform 1000ms ease-in-out;
    }
    
  • Topic has been marked as solved  phenomlab phenomlab 

If this topic and the associated threads resolved an issue for you, or was useful, why not buy me a coffee? It's a nice gesture, and there's other ways to donate if you wish 💗

Discover More