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!

  • der ganze Bildschirm bzw die ganze Seite soll sich drehen?

    Mit css alleine wird das wohl nicht klappen weil du mit css nicht auf ein Eltern Element zugreifen kannst.

    Und ein geschwister Element raus zumachen ist auch nicht sinn der html Regel.

    Also fällt mir nur JS ein


    https://codepen.io/basti1012/pen/KeVdzy

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()