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
<div class="otoceni"> <div class="predni"> MůjSkript.cz </div> <div class="zadni"> Veřejná sbírka </div> </div> <br> <p>Vytvořeno pro <a href="http://mujskript.cz/css/22-flip-animace-otoceni-hoverem-pro-druhy-obsah"> Flip animace - otočení hoverem pro druhý "obsah" - MůjSkript.cz</a></p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.otoceni { width: 500px; position: relative; -webkit-perspective: 500; -moz-transform-style: preserve-3d; -moz-transprform: perspective(500px); } .otoceni > div { line-height: 100px; text-align: center; font-size: 80px; background: #0D6AB7; color: #fff; transition: all .5s; transform: rotateY(00deg); } .otoceni:hover > div { transform: rotateY(180deg); } .otoceni .predni { z-index: 1; position: relative; } .otoceni .zadni { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(-180deg); background: red; } .otoceni:hover .zadni { transform: 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>