Generator transformacji CSS.

Interaktywnie twórz deklarację transform za pomocą suwaków dla translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) i skew (X/Y), a także edytowalnego transform-origin oraz regulowanego rozmiaru pola podglądu. Wygenerowany kod CSS używa translate3d dla przesunięcia, łączy scale/rotate/rotateX/rotateY/skew tylko wtedy, gdy zostały zmienione, i emituje je razem z transform-origin.

1. Przeciągaj suwaki w sekcjach Translate, Scale, Rotate i Skew, aby złożyć transform; każda wartość ma również pole liczbowe do precyzyjnego wprowadzania. 2. Dostosuj rozmiar pola podglądu Box Size (50–250px) i edytuj Transform-Origin (dowolny ciąg CSS origin, domyślnie 50% 50%). 3. Kliknij Reset, aby przywrócić wszystkie wartości do neutralnych ustawień domyślnych. 4. Kliknij Copy, aby skopiować zarówno deklarację transform: ..., jak i transform-origin: ....

translateX/Y/Z: od -200 do 200 px, emitowane razem jako translate3d(x, y, z), gdy dowolne jest niezerowe. scaleX/Y: od 0,1 do 3, emitowane jako scale(x, y), gdy dowolne różni się od 1. rotate (Z): od -360 do 360deg. rotateX/Y: od -180 do 180deg. skewX/Y: od -60 do 60deg, emitowane jako skew(x, y), gdy dowolne jest niezerowe. Jeśli żadna funkcja nie została zmieniona, wynikiem jest transform: none.