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; -webkit-perspective: 500; -moz-transform-style: preserve-3d; -moz-transform: perspective(500px); } .flip > div { line-height: 100px; text-align: center; font-size: 80px; background: #0D6AB7; color: #fff; transition: all .5s; transform: rotateY(00deg); } .flip:hover > div { transform: rotateY(180deg); } .flip .predni { z-index: 1; position: relative; } .flip .zadni { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(-180deg); background: #DA3F94; } .flip: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>