CODEWITHSUNDEEP
htmlwordpresscss
Y Mahesh
Y Mahesh

Reputation: 21

How to spin the logo 360 degrees using CSS?

I am working on a website and want to spin the logo 360 degrees. The website URL is http://flipped.in/JSJ/

The example code i am using is:

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }  
 
.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

Now, i tried replacing the class 'rotate' with the one my logo has but it does not work. Can someone help me adding the right class to this?

Upvotes: 2

Views: 3079

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

The code works as such on Chrome and Firefox. It does not work on IE, since IE implements (in modern versions) the standard names for the properties involved, and the code lacks a setting for the transform property under its standard name. Adding it makes the code work on modern browsers.

<style>
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;   
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;    
    overflow:hidden;
     }  
 .rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);         /* This was missing. */
} 
</style>
<img class=rotate src=
"http://flipped.in/JSJ/wp-content/uploads/2014/12/JSJ-Logo.png"
 alt="Jump Start Jonny">

Upvotes: 5

Related Questions