Funkcja CSS rotate() zniekształca element o określoną liczbę stopni. Możesz obrócić element zgodnie z ruchem wskazówek zegara, używając dodatniej liczby stopni. Możesz też obrócić element w kierunku przeciwnym do ruchu wskazówek zegara, używając liczby ujemnej.
Dzisiaj nauczymy się obracać elementy za pomocą CSS. Po co obracać element? Obracanie elementów sprawia, że Twoja strona internetowa jest bardziej interaktywna. Używany poprawnie, element obrotowy doda estetyki Twojej witrynie.
Podczas czytania tego artykułu zapoznaj się z repozytorium towarzyszące , dzięki czemu możesz zobaczyć koncepcje w działaniu. Umiejętność obracania elementu będzie doskonałym dodatkiem do Twojego zestawu narzędzi CSS.
Obróć CSS ()
Funkcja obracania CSS () umożliwia obrócić element na osi 2D. Funkcja rotate() przyjmuje jeden argument: kąt, o który chcesz obrócić element sieciowy. Możesz obracać element w prawo lub w lewo.
Spójrzmy na składnię funkcji rotate():
Wartość „kąta” reprezentuje liczbę stopni, o jaką element powinien się obrócić. Możesz określić obrót w prawo, używając dodatniej liczby stopni (na przykład 45). Możesz też obrócić w przeciwnym kierunku, używając ujemnej wartości stopni (np. -39).
Funkcja rotate() może zostać zastosowana do dowolnego elementu HTML. Na przykład możesz obrócić akapit tekstu. Możesz też obrócić obraz.
Obrót HTML pojawia się zaraz po wyrenderowaniu strony, więc nie ma widocznego obrotu. Aby zobaczyć rotację w akcji, musisz użyć przejścia CSS . Przejścia zmieniają stan elementu po podjęciu akcji, na przykład gdy kursor znajduje się nad elementem.
