CSS - Container vertikal drehen
Vorderseite ...
Rückseite ...
Ein weiteres Beispiel finden Sie unter: CSS - Container horizontal drehen
<style>
/* Container vertikal drehen */
/* Im gesamten Container die Perspektive setzen */
.flip-container {
perspective: 1000px;
}
/* Bereich drehen bei Hover */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateX(180deg);
}
.flip-container, .front, .back {
width: 533px;
height: 400px;
background: #8A745D;
}
/* Geschwindigkeit des drehens anpassen */
.flipper {
transition: 1.5s;
transform-style: preserve-3d;
position: relative;
/* Hier die Höhe des halben Bildes eintragen */
transform-origin: 100% 200px;
}
/* Rückseite des Fensters ausblenden */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front */
.front {
z-index: 2;
transform: rotateX(0deg);
background: url(img/bild1.jpg);
}
/* Hintergrund */
.back {
transform: rotateX(180deg);
background: url(img/bild2.jpg);
}
</style>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- Front Inhalt -->Vorderseite ...
</div>
<div class="back">
<!-- Hintergrund Inhalt -->Rückseite ...
</div>
</div>
</div>
Beispiel 2
Auf der Münchner Museumsinsel erleben Sie die Entwicklung der Naturwissenschaft und Technik
von den Ursprüngen bis heute.
Das Archiv zählt zu den weltweit führenden Spezialarchiven zur Geschichte der Naturwissenschaft und Technik.
Das Archiv zählt zu den weltweit führenden Spezialarchiven zur Geschichte der Naturwissenschaft und Technik.
Die Sammlungen des Deutschen Museums umfassen über 100 000 Objekte aus den Bereichen
Naturwissenschaft und Technik, rund ein Viertel der Sammlungsobjekte sind in den Ausstellungen zu
sehen.
deutsches-museum.de
deutsches-museum.de
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<kbd> Tastatureingabe
CSS - Externe URL des Hyperlinks sichtbar machen
PHP - Beispiel zu arithmetischen Operatoren