Transform i rotate — CSS

transform zmienia wizualne położenie, skalę lub obrót bez przebudowy układu strony.

Cel lekcji

Poznać zagadnienie „Transform i rotate”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

W połączeniu z transition pozwala zrobić subtelny efekt interakcji.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.icon { transition: transform .2s ease; }
.icon:hover { transform: rotate(15deg) scale(1.1); }

Przeczytaj kod linijka po linijce

.icon { transition: transform .2s ease; }Przypisujemy wartość wybranej właściwości CSS.
.icon:hover { transform: rotate(15deg) scale(1.1); }Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Po najechaniu ikona obraca się i nieco powiększa.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Zmień obrót na -10deg.