Transformacje CSS: rotate, scale, translate i skew
Plac zabaw transformacji CSS
Transformacje CSS: rotate, scale, translate, skew, obrót 3D | We.Inc
Przesuwaj suwaki rotate, scale, translate i skew i kopiuj CSS oraz klasy Tailwind. Omawia kolejność transformacji, transform-origin, obracanie kart w 3D i płynną animację.
Przesuwaj, obracaj, skaluj lub pochylaj element właściwością transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Funkcje są stosowane od prawej do lewej, więc ich kolejność zmienia wynik. Transformacje nigdy nie przesuwają otaczającego układu, a ich animowanie jest tanie, bo przeglądarka może przekazać tę pracę compositorowi.
Cztery funkcje transformacji 2D
Funkcja
Przykład
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Użyj suwaków, aby zbudować transformację i obserwować reakcję karty, a potem przełączaj się między pojedynczą właściwością transform a osobnymi właściwościami translate, rotate i scale. Niżej znajdziesz demo punktu zaczepienia, obrót 3D reagujący na najechanie, przepisy na przejścia i wyjaśnienie, dlaczego transformacje pozostają płynne, gdy top i left się zacinają.
Przeciągaj suwaki translate, rotate, scale i skew. Karta się porusza, a CSS przepisuje się sam.
Wybierz transform-origin, aby zobaczyć, który punkt pozostaje przypięty, gdy karta się obraca lub rośnie.
Przełączaj między łączonym skrótem transform a osobnymi właściwościami.
Skopiuj CSS lub klasy Tailwind i wklej je do arkusza stylów lub znaczników.
Wyśrodkuj absolutnie pozycjonowany element za pomocą top: 50%; left: 50%; translate: -50% -50%. Procenty w translate odnoszą się do samego elementu, a nie do rodzica.
Animuj transform i opacity zamiast width, height, top czy left. Te pozostałe właściwości wymuszają przeliczanie układu w każdej klatce.
Obroty powyżej 360deg są dozwolone i mają znaczenie w animacji: rotate(720deg) przy przejściu od 0 obraca się dwa razy.
Dodawaj will-change: transform tylko do elementów, które zaraz będą animowane, a potem je usuwaj. Zostawianie go wszędzie kosztuje pamięć.
Najczęściej zadawane pytania
Dlaczego kolejność funkcji transformacji ma znaczenie?
Każda funkcja zmienia układ współrzędnych dla funkcji zapisanych przed nią, więc lista jest w praktyce stosowana od prawej do lewej. translate(100px) rotate(45deg) obraca element, a potem przesuwa go prosto w prawo, natomiast rotate(45deg) translate(100px) przesuwa go wzdłuż obróconej, ukośnej osi.
Czym różni się transform: rotate() od właściwości rotate?
Właściwości rotate, scale i translate to samodzielne wersje tych samych funkcji. Można je ustawiać i animować osobno, więc skalowanie przy najechaniu nie kasuje obrotu ustawionego gdzie indziej. Przeglądarka stosuje najpierw translate, potem rotate, potem scale, a na końcu wszystko, co jest w transform.
Czy transform wpływa na układ lub inne elementy?
Nie. Element zachowuje w układzie swój pierwotny box, a sąsiedzi się nie przesuwają. Zmienia się tylko jego namalowany obraz. Transformowany element tworzy jednak nowy kontekst nakładania i staje się containing block dla potomków z position fixed, co może zaskoczyć przy modalach.
Jak odbić element w poziomie?
Użyj transform: scaleX(-1) lub właściwości scale z wartością scale: -1 1. Odbija to element względem jego punktu zaczepienia, którym domyślnie jest środek. Aby uzyskać obrót 3D pokazujący tylną stronę, obracaj wokół osi Y wewnątrz rodzica z perspective.
Dlaczego mój transformowany tekst jest rozmyty?
Ułamkowe przesunięcia i niektóre wartości skali umieszczają znaki między pikselami, co je zmiękcza, zwłaszcza podczas trwania animacji. Zaokrąglanie wartości translate do pełnych pikseli i skalowanie do docelowego rozmiaru zamiast powiększania z mniejszego zwykle wyostrza wynik.
Jak czytać listę transformacji
Przydatny model myślowy: zacznij od ostatniej funkcji i cofaj się do pierwszej, za każdym razem przesuwając, obracając lub rozciągając element w jego bieżącym, już zmienionym układzie. Jeśli wynik wygląda źle, często pomaga odwrócenie listy.
Procenty wewnątrz translate() mierzą własny border box elementu. Dlatego translate(-50%, -50%) wyśrodkowuje element, którego rozmiaru nie znasz z góry.
Dlaczego transformacje animują się płynnie
Przeglądarki renderują stronę etapami: style, layout, paint i composite. Zmiana top lub width ponownie uruchamia layout dla elementu, a często także dla jego sąsiadów. Zmiana transform lub opacity zwykle pozwala przejść od razu do compositingu, w którym już namalowana warstwa jest przesuwana przez procesor graficzny.
To dlatego wytyczne dotyczące ruchu ciągle wskazują te dwie właściwości. Jeśli animacja gubi klatki, otwórz panel wydajności w przeglądarce i szukaj pracy layout i paint w każdej klatce.
3D w jednym akapicie
Nadaj rodzicowi perspective, na przykład 800px, aby dzieci obrócone wokół osi X lub Y wyglądały, jakby się oddalały. Mniejsze liczby wyolbrzymiają głębię. transform-style: preserve-3d pozwala zagnieżdżonym dzieciom dzielić tę przestrzeń 3D, a backface-visibility: hidden ukrywa stronę, gdy ta się odwróci, i to jest podstawa każdego obrotu karty.
Wszystkie funkcje transformacji
Funkcje transformacji 2D i 3D z odpowiadającymi im klasami Tailwind
Funkcja
Co robi
Tailwind (v3 i v4, chyba że zaznaczono inaczej)
translate(x, y)
Przesuwa wzdłuż osi X i Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Przesuwa wzdłuż jednej osi
translate-x-1/2, translate-y-full
translateZ(z)
Przybliża do widza lub oddala (wymaga perspective)
translate-z-4 (v4)
rotate(a)
Obraca zgodnie z ruchem wskazówek zegara o kąt (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Przechyla wokół osi poziomej lub pionowej w 3D
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Powiększa lub zmniejsza; wartość ujemna odbija
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Pochyla element
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Wszystkie transformacje 2D w jednej macierzy
arbitrary: [transform:matrix(...)]
perspective(d)
Głębia tylko dla tego elementu
perspective-[800px] na rodzicu (v4)
Kolejność operacji
Te same dwie funkcje w innej kolejności umieszczają element w innym miejscu. Oba niebieskie elementy startują z tego samego punktu.
Najpierw translate, potem rotate, kontra najpierw rotate, potem translate
W pierwszym elemencie przesunięcie następuje wzdłuż osi X ekranu. W drugim przesunięcie podąża za obróconą osią, więc element ląduje niżej.
Osobne właściwości nie nadpisują się nawzajem
Reguła hover dotyka tylko scale, więc rotate ustawione w regule bazowej przetrwa. Przy skrócie transform trzeba by powtórzyć rotate(-3deg) wewnątrz :hover.
Ten sam obrót, trzy punkty zaczepienia
Punkt zaczepienia to punkt, który pozostaje nieruchomy. center jest domyślny; top left obraca element jak drzwi na zawiasie w rogu.
Obrót karty w 3D
Najedź lub ustaw fokus, aby obrócić (tylko CSS)
perspective na kontenerze nadaje głębię, preserve-3d trzyma obie strony w jednej przestrzeni 3D, a backface-visibility ukrywa stronę skierowaną od widza. Użytkownicy z ograniczonym ruchem dostają natychmiastową zamianę.
Łączenie transformacji z przejściami
Uniesienie przy najechaniu dla kart i przycisków
Zmieniają się tylko transform i box-shadow, a ruch jest wyłączany dla czytelników, którzy proszą o mniej animacji.
Ten sam pomysł w Tailwind
motion-safe: stosuje ruch przy najechaniu tylko wtedy, gdy czytelnik nie zażądał ograniczenia animacji.
Co jest tanie w animowaniu
Praca renderowania wywoływana zmianą właściwości (typowe zachowanie przeglądarek)
Właściwość
Layout
Paint
Tylko composite
transform, translate, rotate, scale
Nie
Nie (zwykle)
Tak
Nie
Nie (zwykle)
Tak
background-color, color, box-shadow
Nie
Tak
Nie
width, height, top, left, margin
Tak
Tak
Nie
(brak transformacji)
Plac zabaw transformacji
Styl wyniku
skrót transform
osobne właściwości
Resetuj
Karta
Przerywany obrys: miejsce karty w układzie. Ciemna kropka: transform-origin.