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.

<strong> Stark betonter Inhalt

CSS - Display-Flex mit Tabellen

PHP - Bildname aus IMG-Tag ermitteln

JavaScript - Mehrere Tastatureingaben mit Zahlen

MySQL - Suchen und Ersetzen in einer Tabellenspalte

Aktualität vortäuschen
Viele Seiten werben mit "aktuellen News", die in Wirklichkeit Wochen alt sind. Wenn man aktuelle News verspricht, dann sollte man diese auch bieten, ansonsten sollte man lieber darauf verzichten.