Transform CSS3 Generator: skalowanie, obracanie, tłumaczenie i pochylanie

CSS3.0 Transform

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;