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.



    Mein letzter Versuch:

    CSS

    #superdiv:hover + body {animation: drehen 1s step-end infinite; animation-iteration-count: 5;}

    @keyframes drehen { 50% { transition:none; transform: rotate(-90deg); } }


    HTML
    <div style="width: 200px; height: 200px; background-color: green;">Hier sind später tausend Elemente.</div><div id="superdiv" style="width: 100px; height: 100px; background-color: red;">Einfach mal die Perspektive wechseln.</div>

    Ich schaffe es nicht. :(
    Wisst ihr weiter?

    Danke!