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

<input> Eingabe (Formularelement)

CSS - Vertikaler Text mit horizontalen Buchstaben

PHP - Letzten Seperator einer URL entfernen

JavaScript - Browser Infos

MySQL - Löschen eines Datensatzes oder mehrere Datensätze