Rotating image/text on hover
2013-10-23, 08:51 PM, (This post was last modified: 2013-10-23, 08:56 PM by APXX.)
#1
Hey CPAElites members. I found a code, how to make rotating image. I figured out to text too.

[hide]

Rotating image(my demo):

[Image: wCrnQF8.gif]

Steps:

1. Put this style code between <head> </head>

Code:
<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);
}    
</style>

2. Put this code between <body> </body> where you want for rotating image:

Code:
<img src="images/1.png" class="rotate" />



Rotating text(my demo):

[Image: Wo1cHq3.gif]

Steps:

1. Put this style code between <head> </head>

Code:
<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);
}    
</style>

2. Put this code between <body> </body> where you want for rotating text:

Code:
<div class="rotate">
     <a>LOL</a>
     </div>

Note: This code work with blogspot page too! TESTED!

[/hide]

[Image: 1LfhmiD.png]
Reply
Share This Thread :



Related Threads
Thread Author Replies Views Last Post
  How I load locker onclick image on the same page? Lone Wolf 4 448 2018-04-02, 09:43 PM
Last Post: Lone Wolf
  Remove image with url all posts wordpress Mix2003_2012 7 1,580 2016-01-28, 12:46 PM
Last Post: Beingmahendra
  60 Premium 3D Text Effect Styles M!st3r XX 18 2,736 2015-11-13, 08:56 PM
Last Post: dontbejello87
  how i can to Change the background image page vip2 18 1,333 2015-02-10, 02:49 AM
Last Post: neverstop
  full screen background(image) idoyonatan 4 512 2015-02-01, 11:04 PM
Last Post: idoyonatan





About Us | Contact Us | CPA Elites | Advertise | Stats

© 2013-2018 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top