css3 rotate transform


@-webkit-keyframes clockwise {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes counterclockwise {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}
.gear { text-align:center; width: 120px; height: 120px; border:none;
-webkit-animation-name: clockwise; -webkit-animation-duration: 4s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function: linear; }
.gear:hover { -webkit-animation-name: counterclockwise; }

Comments are closed.