CSS - Pop-up-Bucheffekt


<style>

div.container {
 
perspective600px;
}

img.popup {
 
transformrotateX(90deg);
 
transform-originbottom;
 
animation-delay0.5s;
 
animation-duration1s;
 
animation-iteration-countinfinite;
 
animation-directionboth;
 
animation-play-statepaused;
 
animation-namepopupanim;

 
outlineSolid 1px #000000;
 
cursorPointer;
}

img.popup:hover {
 
animation-play-staterunning;
}

@
keyframes popupanim {
 
from {
  
transform:rotateX(90deg);
 }
 
to {
  
transformrotateX(0deg);
 }
}
</
style>

<
div class="container"> <img src="bild.png" class="popup"> </div>
<
div class="container"> <img src="bild.png" class="popup"> </div>

Bausteine  Alle Anzeigen

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

<dl> Definitionsliste

CSS - Link farbig unterstreichen

PHP - Lange Wörter mit Leerzeichen teilen

JavaScript - HTML-Tags in benannte Zeichen umwandeln

MySQL - Mindestwert einer Spalte ermitteln

Anmelde-Seite
Ein Link auf Ihrer Homepage zu einer Anmelde-Seite (Login), wo nur der Besitzer Zugriff hat, sollte nicht in der Navigation der Homepage stehen. Speichern Sie die Anmelde-Seite stattdessen in den Favoriten/Lesezeichen Ihres Browsers ab.