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
<script> function otocit(stupne) { var o = document.getElementById("kolik"); otocny.style.transform = otocny.style.WebkitTransform = otocny.style.msTransform = "rotate(" + stupne + "deg)"; o.innerHTML = stupne; } function prepocitat() { var x = document.getElementById("x-offset"); var y = document.getElementById("y-offset"); otocny.style.transformOrigin = otocny.style.WebkitTransformOrigin = otocny.style.msTransformOrigin = x.value + " " + y.value; otocny.className = x.value + "-" + y.value; } </script> <style> #otocit { width: 100px; line-height: 30px; margin: 1em; text-align: center; position: relative; } </style> <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" class="center-center"> <div class="rod"> </div> <div class="vnoreny"></div> <style> .rod { position: absolute; width: 50px; height: 38px; background-color: lightblue; /* Tohle zkuste zakomentovat: */ transform: rotate(20deg); } .vnoreny { position: relative; background-color: #00AA00; width: 45px; top: 17px; left: 15px; height: 11px; z-index: -1; transform: rotate(22deg); } </style> </div> <script> var otocny = document.getElementById("otocit"); </script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>