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
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="styly.css"> <head> <h1> Vítejte na tomto webu </h1> </head> <div id="obsah"> <div class="flipset"> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> </div> <div class="flipset"> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> </div> <div class="flipset"> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> <li> <div class="flip"> <div class="predni"> <img src="http://www.originalfm.cz/bannery/logo3.png" width="300" height="300"> </div> <div class="zadni"> <a href="/">Víc se dozvíte zde</a> </div> </div> </li> </div> </div> <paticka> </paticka>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#h1 { color: #dadada; background: #000000; } li { display:inline-block; } .h5 { background: #0D6AB7; } .flip { width: 300px; position: relative; margin: 10px; -webkit-perspective: 500; -moz-transform-style: preserve-3d; -moz-transform: perspective(500px); } #obsah { margin-left:auto; margin-right:auto; } .flip > div { line-height: 100px; text-align: center; font-size: 80px; background: #0D6AB7; color: #fff; transition: all 0.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; } .flipset{ clear:both; margin-top: 10px; text-align:center; } a{ text-decoration: none; color: white; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>