Thursday, March 15, 2012

Transition CSS (Rotate image with CSS)


#logo {
  height: 77px;
  width: 100px;
  background: url(images/sprite.png) -10px -10px no-repeat;
  direction: ltr;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  cursor: pointer;
  zoom: 1;
  -webkit-backface-visibility: hidden;
 }
 
 #logo:hover {
  -webkit-transform: rotate(-35deg) scale(1.1); 
  -moz-transform: rotate(-35deg) scale(1.1); 
  -o-transform: rotate(-35deg) scale(1.1);
 }
 

No comments:

Post a Comment