Este generador de CSS transform te permite crear transformaciones (rotate, scale, translate y skew) con vista previa en vivo. Mueve los controles, observa cómo cambia el elemento y copia el código transform listo para usar. Funciona en tu navegador, sin registro y en español.
Cómo usar el generador de transform
- Ajusta la rotación, la escala, el desplazamiento y la inclinación con los controles.
- Observa el resultado en la vista previa.
- Copia el CSS y aplícalo a tu elemento.
Las funciones de transform
rotate() gira el elemento, scale() lo agranda o reduce, translate() lo desplaza y skew() lo inclina. Se pueden combinar en una sola propiedad transform, y el orden importa: no es lo mismo rotar y luego mover que al revés. Combínalo con transition para crear animaciones suaves. Para más utilidades, visita nuestras herramientas CSS.
Preguntas frecuentes
¿Transform afecta a la posición de otros elementos?
No. Una de sus ventajas es que transform no altera el flujo del documento: el resto de elementos no se recolocan, lo que lo hace ideal para animaciones eficientes.
¿Puedo combinar varias transformaciones?
Sí, se escriben seguidas en la misma propiedad, por ejemplo transform: rotate(15deg) scale(1.2). Recuerda que el orden influye en el resultado.
¿Funciona en todos los navegadores?
Sí, transform tiene soporte total en los navegadores modernos.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
