CODEWITHSUNDEEP
wordpresscsscss-animations
Hussnain Cheema
Hussnain Cheema

Reputation: 161

Rotate my logo on website

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

Upvotes: 0

Views: 1559

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

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>

Upvotes: 1

Related Questions