Generator transformacji CSS dla leniwych.
Ustaw skalę, obracaj, przesuwaj i pochylaj oraz oglądaj podgląd na żywo, aby uzyskać żądany widok.
Unikaj ustawiania ekstremalnych wartości dla właściwości pochylenia, ponieważ podgląd może zakrywać panel ustawień. W tej sytuacji będziesz musiał odświeżyć stronę.
Skaluj, obracaj, tłumacz i pochylaj
Skalowanie działa tak, jakbyś powiększał i pomniejszał docelowy element. Domyślna wartość skali to 1, która działa jako mnożnik oryginalnego rozmiaru. Oznacza to, że 0,5 zmniejsza o połowę, podczas gdy 2 podwaja sekcję.
Obróć element zgodnie z ruchem wskazówek zegara za pomocą drugiej właściwości, która jest ustawiona w stopniach. Obrót o 180° odwraca obiekt do góry nogami, podczas gdy ujęcia 360° powracają do pierwotnej pozycji pionowej. Ustaw dowolną wartość dodatnią lub ujemną, a nawet ułamki dziesiętne.
Tłumacz przesuwa element z pikselami związanymi z jego pierwotną pozycją. Wartość X w poziomie, a Y w pionie, gdy atrybut obracania wynosi zero.
Pochyl obiekty na ich osi poziomej (X) lub pionowej (Y).
Objaśnienie transformacji CSS
Właściwość transform CSS umożliwia obracanie, skalowanie, pochylanie i tłumaczenie elementu. Modyfikuje przestrzeń współrzędnych wizualnego modelu formatowania CSS.
Definicja i użycie
Właściwość transform stosuje transformację 2D lub 3D do elementu. Ta właściwość umożliwia obracanie, skalowanie, przesuwanie, pochylanie itp. elementów.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
Składnia
transform: none|transform-functions|initial|inherit;