HTML CSS examples for CSS Animation:Rotate
Rotate an rectangle in animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!--from w w w. ja va 2 s .c om--> width: 100px; height: 100px; background: red; position: relative; -webkit-animation: mymove 7s infinite; /* Chrome, Safari, Opera */ animation: mymove 7s infinite; -webkit-animation-delay: 1s; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 0% {-webkit-transform:rotatey(0deg);} 14.29% {-webkit-transform:rotatey(180deg);} 28.57% {-webkit-transform:rotatey(0deg);} } @keyframes mymove { 0% {transform:rotatey(0deg);} 14.29% {transform:rotatey(180deg);} 28.57% {transform:rotatey(0deg);} } </style> </head> <body> <div></div> </body> </html>