CSS - Container horizontal drehen

Vorderseite ...
Rückseite ...

Ein weiteres Beispiel finden Sie unter: CSS - Container vertikal drehen


<style>

/* Container horizontal drehen */

/* Im gesamten Container die Perspektive setzen */
.flip-container {
 
perspective1000px;
}

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

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

/* Geschwindigkeit des drehens anpassen */
.flipper {
 
transition1.5s;
 
transform-stylepreserve-3d;
 
positionrelative;
}

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

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

/* Hintergrund */
.back {
 
transformrotateY(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.

<u> Unterstreichen (Physische Auszeichnung)

CSS - Listenelemente einfärben

PHP - Prüfen, ob eine Variable ein Integer ist

JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen

MySQL - Spalte Gruppieren und zählen

Rechtsklick verboten!
Einen Rechtsklick mit der Maustaste zu verbieten, zum Beispiel mit Javascript, ist nicht originell, sondern dumm. Mit dem Rechtsklick kann man das Kontextmenü anzeigen lassen, und die Homepage zu den Favoriten hinzufügen, oder die Seite ausdrucken. Den Quelltext kann man nicht mit Javascript schützen, denn es gibt viele Wege und Mittel, um an diesen zu gelangen. Sollte man sensible Daten ins Internet stellen?