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.

<legend> Gruppenüberschrift

CSS - Tastenkombinationen darstellen

PHP - Die ersten X-Wörter eines Satzes ausgeben

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Mindestwert einer Spalte ermitteln