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 class="animace"> <img class="first" src="https://www.w3schools.com/css/lights600x400.jpg"> <img class="second" src="https://www.w3schools.com/css/rock600x400.jpg"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.animace { width: 400px; height: 267px; position: relative; display: inline-block; } .animace img { position: absolute; width: 100%; height: auto; backface-visibility: hidden; } .animace .first { animation: rotate-first 6s linear infinite; } .animace .second { animation: rotate-second 6s linear infinite; } @keyframes rotate-first {from {transform: rotateY(0deg)} to {transform: rotateY(360deg)}} @keyframes rotate-second {from {transform: rotateY(180deg)} to {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>