Posted By

reynish on 09/02/10


Tagged

rotation animation CSS3 transform


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

feeela
LyndseyPearce
jplr


CSS3 Rotation


 / Published in: CSS
 

URL: http://designshack.co.uk/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css

On element:hover this will increase scale and rotate over .5 of a second.\r\n\r\nI borrowed it from somewhere else so thank them.

  1. .element:hover {
  2.  
  3. /*Transition*/
  4. -webkit-transition:All .5s ease;
  5. -moz-transition:All .5s ease;
  6. -o-transition:All .5s ease;
  7.  
  8. /*Transform*/
  9. -webkit-transform: rotate(-10deg) scale(1.2);
  10. -moz-transform: rotate(-10deg) scale(1.2);
  11. -o-transform: rotate(-10deg) scale(1.2);
  12. }

Report this snippet  

You need to login to post a comment.