Generador de CSS transform
Mueve los controles para desplazar, girar, escalar e inclinar una caja y copia la propiedad transform. El contorno discontinuo marca dónde estaba la caja antes de transformarla, y el mismo resultado se da también como una sola matrix().
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Arrastra los controles de desplazamiento, giro, escala e inclinación. Desmarca «Misma escala en X e Y» para estirar un solo eje.
- Elige un origen de la transformación si la caja debe girar alrededor de una esquina o un borde.
- Copia el CSS o la forma matrix().
Cómo funciona
Cada parte que no es neutra se convierte en una función: translate(x, y), rotate(angle), scale(x, y) y skew(x, y). La matriz es el producto de sus matrices en el mismo orden. Un punto (x, y) pasa a (a·x + c·y + e, b·x + d·y + f), donde matrix(a, b, c, d, e, f).
Ejemplo resuelto
rotate(90deg) tiene cos 90° = 0 y sen 90° = 1, así que su matriz es matrix(0, 1, -1, 0, 0, 0). Si primero se añade un desplazamiento, translate(10px, 20px) scale(2) da matrix(2, 0, 0, 2, 10, 20): la escala pone a y d en 2 y la traslación va a e y f.
Consejos
- Para animar, transform y opacity son las propiedades que el navegador puede animar sin recalcular el diseño.
- Los giros de más de 360° solo importan en animaciones; un rotate(370deg) estático se ve igual que rotate(10deg).
- Los porcentajes en translate se refieren al tamaño del propio elemento, no al de su padre; esta herramienta usa píxeles.
Preguntas frecuentes
¿Importa el orden de las funciones de transform?
Sí. Las funciones se aplican en el orden escrito, cada una en el sistema de coordenadas que dejan las anteriores, así que translate y luego rotate no es lo mismo que rotate y luego translate. Esta herramienta siempre escribe translate, rotate, scale, skew, el orden que esperan la mayoría de los diseños.
¿Qué cambia transform-origin?
Es el punto fijo de rotate, scale y skew. Por defecto es el centro; con top left la caja gira alrededor de su esquina. A translate no le afecta.
¿Un transform mueve los demás elementos?
No. El elemento transformado conserva su hueco original en el diseño y solo se dibuja en otro sitio; por eso es tan barato animar transform.
¿Para qué sirve matrix()?
Reúne toda la transformación 2D en seis números, que es lo que devuelve getComputedStyle. Ver ambas formas ayuda a leer estilos calculados o a cuadrar el resultado de una herramienta de diseño.