2D transformacije

ZADATAK 1: Funkcija translate()

Napiši CSS pravilo koje pomiče kvadratni div element 50px udesno i 20px prema dolje kada se prijeđe mišem preko njega.

div {
transform: translate(50px, 20px);
}

ZADATAK 2: Funkcija rotate()

Stvori div koji se rotira za 45 stupnjeva kada se klikne na njega.

div {
transform: rotate(20deg);
}

ZADATAK 3: Funkcija scale()

Napravi efekt povećanja slike za 20% kada se prijeđe mišem preko nje.

div {
transform: scale(120%);
}

ZADATAK 4: Funkcija skew()

Napravi tekstni blok koji se nagiba za 20 stupnjeva udesno kada se prijeđe mišem preko njega.

div {
transform: skew(20deg);
}

Lorem, ipsum.

ZADATAK 5: Kombinacija funkcija

Stvori kvadrat koji se pomakne, poveća i rotira kada se prijeđe mišem preko njega.

div {
transform: translate(80px, 20px) scale(110%) rotate(15deg);
}