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
<label>Otočit o <input min="-360" max="360" step="10" value="0" onchange="otocit(this.value)" type="range"> <b id="kolik">0</b> stupňů </label> <div id="otocit"> <div class="rod"></div> <div class="vnoreny"></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#otocit { width: 50px; height: 38px; margin: 1em; transform-origin: 50% 50%; text-align: center; position: relative; } .rod { position: absolute; width: 50px; height: 38px; background-color: lightblue; transform: rotate(0deg); } .vnoreny { position: absolute; background-color: #00AA00; width: 45px; top: 13px; left: 15px; height: 11px; z-index: -1; transform: rotate(0deg); }
CSS
Autoformát
CSS reset
Až na konci
function otocit(stupne) { var o = document.getElementById("kolik"); var otocny = document.getElementById("otocit"); otocny.style.transform = otocny.style.WebkitTransform = otocny.style.msTransform = "rotate(" + stupne + "deg)"; o.innerHTML = stupne; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>