Mit einem Hover-Button den kompletten Body per CSS drehen

Hallo, ich versuche seit Stunden eine Pseudoklasse so zu definieren, dass sich beim Anklicken (oder Hovern) eines DIVs der komplette Body 5x dreht.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> .gruen{ width: 200px; height: 200px; background-color: green; } #superdiv{ width: 100px; height: 100px; background-color: red; } @keyframes drehen { 0% { transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style> <script src="/js_webseite/jquery.js"></script> <body> <div class="gruen">Hier sind später tausend Elemente.</div> <div id="superdiv">Einfach mal die Perspektive wechseln.</div> </body> <script> $('#superdiv').hover(function(){ $('body').css('animation','drehen 1s linear 5'); }) </script>