Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Otočení se změnou obsahu</h1> <div class="flip"> <div class="predni"> První </div> <div class="zadni"> Druhý </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.flip { width: 300px; position: relative; } .flip > div { line-height: 100px; text-align: center; font-size: 80px; background: #0D6AB7; color: #fff; transition: all .5s; transform: perspective(500px) rotateY(0deg); } .flip:hover > div { transform: perspective(500px) rotateY(180deg); } .flip .predni { z-index: 1; position: relative; } .flip .zadni { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: perspective(500px) rotateY(-180deg); background: #DA3F94; } .flip:hover .zadni { transform: perspective(500px) rotateY(0deg); z-index: 2; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>