Generador de transform CSS (girar, mover, escalar, inclinar y 3D)
Mueve los controles y mira cómo cambia la tarjeta. El orden de las funciones en el código es el mismo en que el navegador las aplica.
Cómo usarGirar, mover e inclinar sin memorizar la sintaxis
Disponible en: 
Generador de transform CSS (girar, mover, escalar, inclinar y 3D): para qué sirve
La propiedad transform mueve, gira, escala e inclina elementos sin tocar el layout de la página, y es la forma más ligera de animar. Mueve los controles de mover, girar, escalar, inclinar y girar en 3D, elige el punto de origen y la perspectiva, y mira cómo cambia la tarjeta al instante.
El código sale en el orden en que el navegador aplica las funciones y, con la opción de hover, incluye una transición suave limitada a quien usa mouse y desactivada para quien pidió menos movimiento. La página explica por qué el orden importa y por qué animar transform es más ligero que animar top, left o width.
Cómo usar
- Mueve los controles.
- Elige el origen y, en 3D, la perspectiva.
- Copia el CSS.
Cuándo usar
- Efectos de hover en tarjetas.
- Íconos girados y reflejados.
- Tarjetas que se voltean en 3D.
Preguntas frecuentes
¿Importa el orden de las funciones en transform?
Sí importa. 'translateX(100px) rotate(45deg)' mueve y luego gira en el lugar; 'rotate(45deg) translateX(100px)' gira primero y después avanza en la dirección ya girada, terminando en otro punto. El generador usa el orden mover, girar, escalar e inclinar, el más predecible.
¿Por qué usar transform en animaciones?
Transform y opacity son las propiedades más baratas de animar: no obligan al navegador a recalcular el layout de la página y suelen ejecutarse en la tarjeta gráfica. Animar top, left, width o margin, en cambio, hace que la animación se trabe en celulares más modestos.
¿Qué hace la perspectiva?
En las rotaciones 3D (rotateX y rotateY), la perspectiva define la distancia del observador: valores pequeños, como 300px, dan un efecto 3D fuerte y deformado; valores grandes, como 1500px, hacen el giro más suave.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.