CSS transformgenerator

Bouw interactief een transform-declaratie op met schuifregelaars voor translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) en skew (X/Y), plus een bewerkbare transform-origin en een aanpasbare grootte van het voorbeeldvak. De gegenereerde CSS gebruikt translate3d voor vertalingen, combineert scale/rotate/rotateX/rotateY/skew alleen wanneer ze zijn gewijzigd, en geeft ze samen met transform-origin uit.

1. Sleep de schuifregelaars onder Translate, Scale, Rotate en Skew om een transform samen te stellen; elke waarde heeft ook een numeriek invoerveld voor exacte invoer. 2. Pas de Box Size van het voorbeeld aan (50–250px) en bewerk Transform-Origin (een willekeurige CSS-origin-tekenreeks, standaard 50% 50%). 3. Klik op Reset om elke waarde terug te zetten naar de neutrale standaardwaarde. 4. Klik op Copy om zowel de declaratie transform: ... als transform-origin: ... te kopiëren.

translateX/Y/Z: -200 tot 200 px, worden samen uitgegeven als translate3d(x, y, z) wanneer er één ongelijk is aan nul. scaleX/Y: 0,1 tot 3, worden uitgegeven als scale(x, y) wanneer één ervan afwijkt van 1. rotate (Z): -360 tot 360deg. rotateX/Y: -180 tot 180deg. skewX/Y: -60 tot 60deg, worden uitgegeven als skew(x, y) wanneer één ervan ongelijk is aan nul. Als er geen functie is gewijzigd, is de uitvoer transform: none.