Beispiel:CSS3 transform-rotate-1.html

<!DOCTYPE html> <html> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <title>rotate</title>
 <style>

@keyframes rotating { 0% {rotate: 0; } 100% { rotate: 1turn; } }

@keyframes scratch {

   0% {rotate: 0; }
  10% { rotate: -0.25turn;}
 100%{ rotate: 1turn;}

} .disc {

 animation: rotating 4s linear infinite;

border-radius: 50%; width: 2em;

   height: 2em;
   padding: 2em;
   line-height: 200%;
   color: white;
   background: black;
   text-align: center;

} .disc:hover {

 animation: scratch 4s linear infinite;

} </style> </head> <body>

Drehung mit rotate

   <aside class="disc">disc</aside>

Durch :hover kannst du die Drehrichtung ändern!

</body> </html>