CSS Transform Rotate X 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
Wenn Ihr auf den Button “Drehen” klick, dann müsst Ihr zunächst erneut dort klicken und das Bild zurückdrehen, bevor der Hover-Effekt wieder wirken kann
Gefunden bei: Werner-Zenk.de
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 4 Sekunden festgelegt. Meine Fotos habe ich hier in ein Verzeichnis “images” kopiert, das im gleichen Verzeichnis wie diese Seite liegt. Dem Hintergrund habe ich hier ein Bild gegeben.
<!-- Style Container vertikal drehen -->
<style>
/* Im gesamten Container die Perspektive setzen */
.flip-container {
perspective: 1000px;
}
/* Bereich drehen */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateX(180deg);
}
/* Container Groesse und Style */
.flip-container, .front, .back {
width: 720px;
height: 480px;
color: #FFFFFF;
/* entweder Hintergrundfarbe (deaktiviert) */
/* background: #43ADC7; */
/* oder hier ein Hintergrundbild (aktiviert) */
background: url(images/Brandung.jpg);
border-radius: 10px;
box-shadow: 5px 5px 5px #888888;
}
/* Geschwindigkeit des Drehens anpassen - hier 2 Sekunden*/
.flipper {
transition: 4.0s;
transform-style: preserve-3d;
position: relative;
/* Hier die halbe Hoehe des Bildes eintragen */
transform-origin: 100% 240px;
}
/* Rueckseite des Fensters ausblenden */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Vorderseite */
.front {
z-index: 2;
transform: rotateX(0deg);
background: url(images/Segel.jpg);
}
/* Rueckseite */
.back {
transform: rotateX(180deg);
background: url(images/Detail.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: Black;
border-radius: 10px;
background: rgba(255, 255, 255, 0.50);
border: Solid 1px rgba(255, 255, 255, 0.75);
cursor: auto;
}
/* Style Link in Textbox hinten */
div.content2 a {
color: Blue;
text-decoration: Underline;
}
div.content2 a:hover {
color: Red;
text-decoration: None;
}
</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. Hier habe ich aus Spaß noch dem Cursor, über dem Container, ein kleines Bildchen gegeben und eine Lytebox eingebaut.
Weiterhin habe ich hier (optional) dem äußeren DIV noch eine id="flip-toggle" gegeben, die ich für den optionalen Button “Drehen” verwendet habe.
<div id="flip-toggle" style="cursor: url(images/cursor.gif), auto;" class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<div class="content1">Bei der Bark heißen die Masten, von vorne nach achtern: Fockmast, Großmast und zuletzt Besanmast.</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>
<br><br><a href="images/Segel.jpg" class="lyteshow" data-lyte-options="group:gruppe showNavigation:true autoEnd:false showPrint:true" data-title="Bark">Fotos in Lytebox</a>
<a href="images/Detail.jpg" class="lyteshow" data-lyte-options="group:gruppe showNavigation:true autoEnd:false showPrint:true" data-title="Block"></a>
<a href="images/Brandung.jpg" class="lyteshow" data-lyte-options="group:gruppe showNavigation:true autoEnd:false showPrint:true" data-title="Brandung"></a>
</div>
</div>
</div>
</div>
Unten noch der optionale Button “Drehen” mit der ‘onclick’ Anweisung für die id="flip-toggle", die sich auf die gleiche Class bezieht und auch wieder in den HTML-Code Editor eines Textfeldes gehört. Diese optionale Style-Anwesiung zentriert diesen Button lediglich.
<button style="margin: auto; display: block;" onclick="document.querySelector('#flip-toggle').classList.toggle('hover');">Drehen</button>
Im “content2” habe ich hier noch einen Link mit einer Lytebox eingebaut, um alle 3 Fotos zeigen zu können. Für den Einbau einer Lytebox guckt hier.
