Nueve controles ajustan translate, scale, rotate, skew y el origen de la transformación. El escenario se redibuja con cada pulsación y Copiar CSS envía al portapapeles una declaración transform limpia.
Se ejecuta localmente en tu navegadorNueve controles manejan una transformación bidimensional: translateX y translateY en px (-240 a 240), scaleX y scaleY (-3 a 3), rotate (-360 a 360 grados), skewX y skewY (-89 a 89 grados) y los porcentajes de transform-origin X e Y (0 a 100). Cada pulsación redibuja la tarjeta del escenario y el panel de código contiene la cadena exacta que Copiar CSS envía al portapapeles.
La exportación compone las funciones en un orden fijo (translate, rotate, skew y scale) y omite las que siguen en su valor identidad, así que una página sin tocar exporta transform: none. Una prueba en el navegador confirmó que la cadena reducida produce la misma matriz que la completa: translate(77px, 0px) y translate(77px, 0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1) dan matrix(1, 0, 0, 1, 77, 0).
El banco de trabajo escribe primero translate(...), después rotate(...), después skew(...) y por último scale(...). Las funciones que siguen en su valor identidad no se exportan: una edición solo de traslación exporta transform: translate(77px, 0px); y si no hay nada definido el bloque es transform: none; sin línea de transform-origin.
El orden importa. En la prueba del navegador, translate(100px, 0px) rotate(45deg) calculó matrix(0.707107, 0.707107, -0.707107, 0.707107, 100, 0), mientras que rotate(45deg) translate(100px, 0px) calculó matrix(0.707107, 0.707107, -0.707107, 0.707107, 70.7107, 70.7107): la traslación gira con el elemento cuando va en segundo lugar.
Desplazamiento de -240 a 240 px, escala de -3 a 3, rotación de -360 a 360 grados, inclinación de -89 a 89 grados y origen de 0 a 100 %. Mientras escribes, la vista previa se mantiene dentro de esos límites; al salir del campo, el número limitado sustituye al texto escrito, así que 999 en el origen Y guarda 100 % y -300 en translateX guarda -240 px.
Los nueve campos aceptan cualquier paso, por lo que la escala 1.04 del preajuste Tilt no se marca como inválida. La inclinación se detiene en 89 grados porque tan(90 grados) no está acotada, y el marcador de origen no puede salir de la tarjeta porque el origen nunca abandona 0-100 %.
La página es bidimensional: no hay translateZ, rotateX/rotateY, perspectiva ni entrada matrix(), y el escenario contiene un solo elemento. El selector es fijo (.transformed-element) y el panel exporta una declaración transform más un transform-origin opcional; no hay salida para media queries ni variables CSS.
Todo se ejecuta en la página. Recorrer los nueve campos, los tres preajustes no predeterminados, Copiar CSS y Restablecer no generó ninguna petición de red en la prueba; solo se carga la etiqueta de analítica compartida. En una ventana de 390px la tarjeta mide 118x118 (150x150 en escritorio) con el mismo marcador de origen de 12px y sin desbordamiento horizontal.