Objekt s rotací

I tady si při kopírování a vložení do elementu “Zkrácený kód” můžete udělat ještě několik základních úprav.

Postupujte prosím takto:

řádek 3 a 4 nabízí úpravu proporcí objektu,
řádek 5 definuje sílu a barvu okraje objektu,
řádek 6 je nastaven bez pozadí, protože takto se objekt tváří, jako by se vznášel, a proto se domnívám, že takto to vypadá nejlépe,
řádek 8 nastavuje délku animace, čím více snížíte čas, tím se objekt bude otáčet rychleji,
řádek 9 nastavují zaoblení hran v pixelech.

Pro větší přehled jsem Vám napsal i poznámky k ovládání přímo do kódu. Poznámky si následně vymažte.

Další úpravy a nastavení již nechám na Vaší fantazii.

				
					<style>
  .rectangle {
    width: 360px; /* šíře obdelníku v pixelech, kterou můžete dle potřeby upravit */
    height: 140px; /* výška obdelníku v pixelech, kterou můžete dle potřeby upravit */
    border: 3px solid green; /* šířka okraje v pixelech, kterou můžete dle potřeby upravit */
    background: none;
    position: relative;
    animation: move-rotate 15s linear infinite; /* délka animace v sekundách, také lze jednoduše upravit */
    border-radius: 7px; /* šířka zaoblení rohů v pixelech, kterou můžete dle potřeby upravit */
  }

  @keyframes move-rotate {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    25% {
      transform: translateX(-25px) rotate(-90deg);
    }
    50% {
      transform: translateX(0) rotate(-180deg);
    }
    75% {
      transform: translateX(25px) rotate(-270deg);
    }
    100% {
      transform: translateX(0) rotate(-360deg);
    }
  }
</style>

<div class="rectangle"></div>

TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením “Copy”) a vložte do objektu, na který jej chcete použít.

V Elementoru zvolte element “zkrácený kod”.

Následně vložíte kód a proces je hotový.

Úpravy pak můžete provádět přímo v editaci kódu.

Pokud například budete chtít z obdelníku udělat čtverec, přepíšete v kódu na řádku 3 a 4 hodnoty 360px a 140px jen na dvě shodné hodnoty.