How to spin the logo 360 degrees using CSS?

1 Views

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:

Read More
.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?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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">