CSS Transform -generaattori

Rakenna muunnosjuliste interaktiivisesti liukusäätimillä käännökselle (X/Y/Z), skaalaukselle (X/Y), kääntämiselle (Z/X/Y) ja vinoutumiselle (X/Y), sekä muokattava muunnos-alkupiste ja säädettävä esikatselulaatikon koko. Luotu CSS käyttää translate3d-käännöstä, yhdistää skaalan/kääntämisen/rotateX/rotateY/skew vain kun muutettu, ja emitoidaan muunnos-alkupisteen kanssa.

1. Vedä liukusäätimet Kohdista, Skalaa, Käännä ja Vinouuta koostaaksesi muunnoksen; jokaisella arvolla on myös numeerinen syöttö tarkkaa kirjoittamista varten. 2. Säädä esikatselun Laatikon kokoa (50–250px) ja muokkaa Muunnos-alkupistettä (mikä tahansa CSS-alkupiste-merkkijono, oletus 50% 50%). 3. Napsauta Palauta palauttaaksesi jokaisen arvon neutraaliin oletukseen. 4. Napsauta Kopioi kopioidaksesi sekä transform: ... että transform-origin: ... -julistukset.

translateX/Y/Z: -200 - 200 px, emitoidaan yhdessä muodossa translate3d(x, y, z) kun mikä tahansa ei ole nolla. scaleX/Y: 0.1 - 3, emitoidaan muodossa scale(x, y) kun kumpi tahansa eroaa 1:stä. rotate (Z): -360 - 360deg. rotateX/Y: -180 - 180deg. skewX/Y: -60 - 60deg, emitoidaan muodossa skew(x, y) kun kumpi tahansa ei ole nolla. Jos funktiota ei ole muutettu, tuloste on transform: none.