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 {
 
perspective1000px;
}

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

.
flip-container, .front, .back {
 
width533px;
 
height400px;
 
background#8A745D;
}

/* Geschwindigkeit des drehens anpassen */
.flipper {
 
transition1.5s;
 
transform-stylepreserve-3d;
 
positionrelative;
 
/* Hier die Höhe des halben Bildes eintragen */
 
transform-origin100200px;
}

/* Rückseite des Fensters ausblenden */
.front, .back {
 
backface-visibilityhidden;
 
positionabsolute;
 
top0;
 
left0;
}

/* Front */
.front {
 
z-index2;
 
transformrotateX(0deg);
 
backgroundurl(img/bild1.jpg);
}

/* Hintergrund */
.back {
 
transformrotateX(180deg);
 
backgroundurl(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.
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

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<tbody> Tabellenkörper

CSS - Leuchtende blaue Eingabefelder

PHP - Wiederkehrende Termine anzeigen

JavaScript - Zeitabhängige Aktualisierung

MySQL - Summe einer Spalte ermitteln

Schlagzeile entscheidet
Maßgeblich beeinflusst wird dieser erste Eindruck durch die auf Ihrer Website verwendeten Headlines (Schlagzeilen): Wenn Sie Teaser, also Anreißer-Texte, verwenden, dann entscheidet die verwendete Headline oft, ob man zum Artikel weiterklickt. Die über einer Seite platzierte Haupt-Headline ist ein wichtiges Kriterium für die Entscheidung, ob weitergelesen wird oder nicht. Auch die im Text verwendeten Subheadlines spielen dabei eine große Rolle.