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í s „3D perspektivou“</h1> <div class="flip"> <div class="predni"> Text </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.flip { width: 200px; -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); transform-origin: 100%; transform-style: preserve-3d; } .flip:hover > div { transform: rotateY(180deg); }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>