CSS Transform Rotate Y Beispiel

Gehe mit der Maus über das Bild oder tippe am Smartphone (geht nicht am iPhone) auf das Bild und zurück auf den Hintergrund

Gefunden bei: Werner-Zenk.de. Guckt Euch auch mein Beispiel für eine vertikale Drehung an, bei dem ich zusätzlich einen ‘onClick’ Button gesetzt habe.

Ich habe hier die CSS ein wenig an meine Seite angepasst, die so aussieht und “Zwischen Head Tags” des Layouts oder in eine CSS-Datei gehört.

Die Dauer der Animation habe ich hier auf 2 Sekunden festgelegt. Meine Fotos habe ich hier in ein Verzeichnis “images” kopiert, das im gleichen Verzeichnis wie diese Seite liegt.

<!-- Style Container horizontal drehen -->
<style>

    /* Im gesamten Container die Perspektive setzen */
    .flip-container {
     perspective: 1000px;
    }

    /* Bereich drehen bei Hover */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
     transform: rotateY(-180deg);
     cursor: wait;
    }

    /* Container Groesse und Style */
    .flip-container, .front, .back {
     width: 720px;
     height: 480px;
     color: #FFFFFF;
     background: #6A754B;
     border-radius: 10px;
     box-shadow: 5px 5px 5px #888888;
    }

    /* Geschwindigkeit des Drehens anpassen - hier 2 Sekunden*/
    .flipper {
     transition: 2.0s;
     transform-style: preserve-3d;
     position: relative;
    }

    /* Rueckseite des Fensters ausblenden */
    .front, .back {
     backface-visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
    }

    /* Vorderseite */
    .front {
     z-index: 2;
     transform: rotateY(0deg);
     background: url(images/Spatzen-Vorne.jpg);
    }

    /* Rueckseite */
    .back {
     transform: rotateY(-180deg);
     background: url(images/Spatz-Hinten.jpg);
    }

    /* Inhalt Textbox vorne */
    div.content1 {
     width: 150px;
     height: 90px;
     margin: 20px;
     padding: 10px;
     color: Black;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.70);
     border: Solid 1px  rgba(255, 255, 255, 0.75);
    }
   
    /* Inhalt Textbox hinten */
    div.content2 {
     width: 150px;
     height: 90px;
     margin: 20px;
     padding: 10px;
     color: White;
     border-radius: 10px;    
     background: rgba(255, 255, 255, 0.40);
     border: Solid 1px  rgba(255, 255, 255, 0.75);
    }   

    /* Style Link in Textbox hinten */
    div.content2 a {
     color: White;
     text-decoration: Underline;
    }
   
</style>

Diese DIVs gehören in den HTML-Code Editor eines Textfeldes. Hier könnt Ihr Euren Text für den “Content” (Inhalt) der Boxen eintragen.

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
 <div class="flipper">
  <div class="front">
   <div class="content1">Der Spatz<br>ist eine verbreitete Bezeichnung für einen Vogel aus der Gattung der Sperlinge.</div>
  </div>
  <div class="back">
   <div class="content2">Vielen Dank an Doris<br>für diese schönen Fotos.<br><br><a href="http://www.fotoatelier-essen.de/" target="_blank">Fotoatelier-Essen</a></div>
  </div>
 </div>
</div>

nach oben