• Resolved planetboris

    (@planetboris)


    Hi, I’m trying to create a 3d spin effect for my logo, will your plug-in be able to achieve this?
    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author eleopard

    (@eleopard)

    Hello planetboris,

    Thanks for using the Animate It!
    What you seek can be easily done using Animate it and a little bit of custom CSS

    Here you can find 2 types of spinners that I have created:
    https://visas.wpdevcloud.com/3d-spinner/

    Please follow these steps:
    1. In your WordPress, go to Settings > Animate It! > Custom CSS box and paste the following:

    .spinner-3d-wrapper {
        perspective: 1200px;
    }
    
    .spinner-3d {
        animation-name: spinner3d;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 4s;
        transform-style: preserve-3d;
        backface-visibility: visible;
    }
    
    @-webkit-keyframes spinner3d {
        from { -webkit-transform: rotateY(0deg);    }
        to   { -webkit-transform: rotateY(-360deg); }
        }
    
    @keyframes spinner3d {
        from {
              -moz-transform: rotateY(0deg);
              -ms-transform: rotateY(0deg);
              transform: rotateY(0deg);
        }
        to {
              -moz-transform: rotateY(-360deg);
              -ms-transform: rotateY(-360deg);
              transform: rotateY(-360deg);
        }
    }

    2. Now use these DIVs to add the spinners anywhere you want:

    1. Vertical Spinner:

    <div class="animated spinner duration8 infinite" style="text-align:center;">
        Add Icon/Text Here
    </div>

    2. 3d Spinner

    <div class="spinner-3d-wrapper">
        <div class="animated spinner-3d duration8 infinite" style="text-align:center;">
            Add Icon/Text Here
           </div>
    </div>

    You can change duration8 to higher or lower to decrease/increase the speed

    Please let me know if you face any issues.

    Thread Starter planetboris

    (@planetboris)

    Wow, that’s excellent, thank you very much for the code and quick response.
    Let me try that out and I will give you an update.
    Thanks again, very much appreciate this.
    Cheers!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Logo spin effect’ is closed to new replies.