Rotate my logo on website

Question

I have a WordPress site: http://powersmart.tech/wordpress/

I want my webiste logo to rotate like this: https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0

I have made my logo to rotate in a circle using following code:

#Top_bar #logo img {
 -webkit-animation:spin 4s linear infinite;
 -moz-animation:spin 4s linear infinite;
 animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }

Please guide me.

Thanks

please check this link:- http://stackoverflow.com/questions/16771225/css3-rotate-animation — Bharat Negi, Oct 28 '16 at 09:54

score 1 · Accepted Answer · answered Oct 28 '16 at 09:51

You're using the wrong transformation type, this is achieved using scaleX rather then rotate. I've made a small demo how this should work:

#logo {
    margin: 50px;
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
    50% {
        -moz-transform: scaleX(0.1);
    }
}

@-webkit-keyframes spin {
    50% {
        -webkit-transform: scaleX(0.1);
    }
}

@keyframes spin {
    50% {
        -webkit-transform: scaleX(0.1));
        transform: scaleX(0.1);
    }
}

<div id="logo"> hi </div>

Rotate my logo on website

1 Answers1