CODEWITHSUNDEEP
jquerycss
Barbiyong
Barbiyong

Reputation: 147

Rotate by hover in css

#square{
        width: 100px;
        height: 100px;
        background-color: magenta;
        margin: 50px 50px 50px 50px;
}
.rotate{
    -webkit-transition-duration: 5.0s;
    -moz-transition-duration: 5.0s;
    -o-transition-duration: 5.0s;
    transition-duration: 5.0s;        
    -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);
}

My code is about hover the item and it will rotate around itself.

But I want to know how it can be sensitive-hover like, when I drag mouse across the item it will be rotate by how speed that the mouse moving across.

It looks like spinning the wheel.

Upvotes: 1

Views: 390

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

like this

demo

css

#square {
        width: 100px;
        height: 100px;
        background-color: magenta;
        margin: 50px 50px 50px 50px;
    }
.rotate{
    -webkit-transition-duration: 5.0s;
    -moz-transition-duration: 5.0s;
    -o-transition-duration: 5.0s;
    transition-duration: 5.0s;

    -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);
-ms-transform: rotate(360deg); 
}

Upvotes: 1

Related Questions