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.

<doctype> Dokumententyp

CSS - Drehende E-Mail - Problem gelöst!

PHP - Begrüßung der Besucher

JavaScript - Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben

MySQL - Zufällige Datensätze auslesen

Reset-Button
Man muss sich bei Formularen überlegen, ob man überhaupt einen Reset-Button braucht - bei Formularen mit nur einem Eingabefeld ist er eher witzlos, bei umfangreichen Formularen ist er dagegen umso ärgerlicher, wenn er aus Versehen betätigt wurde!