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 Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Externe URL des Hyperlinks sichtbar machen

PHP - Den längsten Schlüssel in einem Array anzeigen

JavaScript - Markierten Text in ein Eingabefeld einfügen

MySQL - Einfügen oder aktualisieren mit 'ON DUPLICATE KEY UPDATE'