CSS-transformgenerator

Bygg en transform-deklaration interaktivt med reglage för translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) och skew (X/Y), samt en redigerbar transform-origin och justerbar storlek på förhandsvisningen. Den genererade CSS:en använder translate3d för översättning, kombinerar scale/rotate/rotateX/rotateY/skew bara när de ändras och genereras tillsammans med transform-origin.

1. Dra i reglagen under Translate, Scale, Rotate och Skew för att komponera en transform; varje värde har också ett numeriskt fält för exakt inmatning. 2. Justera förhandsvisningens Box Size (50–250px) och redigera Transform-Origin (valfri CSS-originsträng, standard 50% 50%). 3. Klicka på Återställ för att återställa alla värden till sina neutrala standardvärden. 4. Klicka på Kopiera för att kopiera både transform: ... och transform-origin: ... -deklarationerna.

translateX/Y/Z: -200 till 200 px, skickas ut tillsammans som translate3d(x, y, z) när något är skilt från noll. scaleX/Y: 0,1 till 3, skickas ut som scale(x, y) när endera skiljer sig från 1. rotate (Z): -360 till 360deg. rotateX/Y: -180 till 180deg. skewX/Y: -60 till 60deg, skickas ut som skew(x, y) när endera är skilt från noll. Om ingen funktion ändras blir utdatan transform: none.