CSS-transformgenerator

Bygg en transform-deklarasjon interaktivt med glidere for translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) og skew (X/Y), i tillegg til en redigerbar transform-origin og justerbar størrelse på forhåndsvisningsboksen. Den genererte CSS-en bruker translate3d for oversettelse, kombinerer scale/rotate/rotateX/rotateY/skew bare når de er endret, og sendes ut sammen med transform-origin.

1. Dra gliderne under Translate, Scale, Rotate og Skew for å sette sammen en transform; hver verdi har også et numerisk felt for presis angivelse. 2. Juster forhåndsvisningens Box Size (50–250px) og rediger Transform-Origin (enhver gyldig CSS-originstreng, standard 50% 50%). 3. Klikk Reset for å tilbakestille hver verdi til nøytral standard. 4. Klikk Copy for å kopiere både transform: ... og transform-origin: ... deklarasjonene.

translateX/Y/Z: -200 til 200 px, sendes ut sammen som translate3d(x, y, z) når noen av dem er ulik null. scaleX/Y: 0.1 til 3, sendes ut som scale(x, y) når noen av dem avviker fra 1. rotate (Z): -360 til 360deg. rotateX/Y: -180 til 180deg. skewX/Y: -60 til 60deg, sendes ut som skew(x, y) når noen av dem er ulik null. Hvis ingen funksjon er endret, er utdataene transform: none.