Generatore di effetti di trasformazione CSS.

Costruisci in modo interattivo una dichiarazione transform con slider per translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) e skew (X/Y), oltre a un transform-origin modificabile e una dimensione della box di anteprima regolabile. Il CSS generato utilizza translate3d per la traslazione, combina scale/rotate/rotateX/rotateY/skew solo quando vengono modificati e li emette insieme a transform-origin.

1. Trascina gli slider sotto Translate, Scale, Rotate e Skew per comporre un transform; ogni valore dispone anche di un campo numerico per inserimenti precisi. 2. Regola la Box Size dell'anteprima (50–250px) e modifica Transform-Origin (qualsiasi stringa CSS di origine, predefinita 50% 50%). 3. Fai clic su Reset per riportare ogni valore al suo valore predefinito neutro. 4. Fai clic su Copy per coprire sia la dichiarazione transform: ... sia transform-origin: ....

translateX/Y/Z: da -200 a 200 px, emessi insieme come translate3d(x, y, z) quando uno qualsiasi è diverso da zero. scaleX/Y: da 0,1 a 3, emessi come scale(x, y) quando uno dei due differisce da 1. rotate (Z): da -360 a 360deg. rotateX/Y: da -180 a 180deg. skewX/Y: da -60 a 60deg, emessi come skew(x, y) quando uno dei due è diverso da zero. Se nessuna funzione viene modificata, l'output è transform: none.