CSS Transform-generator

Byg gennem interaktivt en transform-deklaration med skaler for translation (X/Y/Z), scale (X/Y), rotation (Z/X/Y) og skew (X/Y), samt en redigerbar transform-origin og en justerbar storlek for preview-boxen. Den genererede CSS-bruger translate3d for translation, kombinerer scale/rotate/rotateX/rotateY/skew kun når de ændres, og sendes ud sammen med transform-origin.

1. Træk sliderene under Translate, Scale, Rotate og Skew for at komponere en transform; hver værdi har desuden en numerisk indtastingsmulighed for præcist indtastning. 2. Juster Box Size i forudvisningen (50–250px) og redigér Transform-Origin (hvilken CSS-origin-string som helst, standard er 50% 50%). 3. Klik på Reset for at returnere alle værdier til deres neutrale standardværdier. 4. Klik på Copy for at kopiere både transform: ... og transform-origin: ...-deklarationerne.

translateX/Y/Z: -200 til 200 px, sendes sammen som translate3d(x, y, z) når nogen af værdierne er ikke nul. scaleX/Y: 0,1 til 3, sendes som scale(x, y) når enten af værdierne skiller sig fra 1. rotate (Z): -360 til 360deg. rotateX/Y: -180 til 180deg. skewX/Y: -60 til 60deg, sendes som skew(x, y) når nogen af værdierne er ikke nul. Hvis ingen funktion ændres, er outputen transform: none.