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 id="f1_container"> <div id="f1_card"> <div class="front face"> aaaaaaaaa <span>Any content can go here.</span> </div> <div class="back face center"> bbbbbbbbbbbbbb <span>Any content can go here.</span> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#f1_container { position: relative; margin: 10px auto; width: 250px; height: 100px; z-index: 1; } #f1_container { perspective: 1000; } #f1_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.2s linear; } #f1_container:hover #f1_card { transform: rotateX(180deg); } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background-color: red; } .face.back { display: block; transform: rotateX(180deg); box-sizing: border-box; background-color: blue; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>