Generador de transformaciones

Mueve, gira, escala y sesga un elemento (también en 3D) con controles visuales y copia la propiedad transform lista para usar.

¿Qué es transform?

La propiedad transform cambia cómo se dibuja un elemento sin alterar el espacio que ocupa en la página: los elementos vecinos no se mueven. Por eso es perfecta para efectos hover, animaciones y tarjetas 3D.

Función	Qué hace	Ejemplo
translate()	Desplaza el elemento	translate(20px, -10px)
rotate()	Lo gira en el plano	rotate(45deg)
rotateX() / rotateY()	Lo gira en 3D sobre un eje	rotateY(180deg)
scale()	Lo agranda o achica	scale(1.2)
skew()	Lo inclina (sesga)	skewX(-15deg)

Otras propiedades relacionadas:

• transform-origin — el punto sobre el que gira o escala (por defecto, el centro).
• perspective — va en el padre y da profundidad a las transformaciones 3D. Valores pequeños (300px) exageran el efecto; grandes (1500px) lo suavizan.
• backface-visibility: hidden — oculta la cara trasera al voltear el elemento (clave para tarjetas que se dan vuelta).

.tarjeta {
  transition: transform 0.3s ease;
}

.tarjeta:hover {
  transform: translateY(-6px) scale(1.03);
}

Generador

Elige un preset o mueve los controles. La línea punteada muestra la posición original del elemento.

Generador de transformaciones

Mover (translate)

XpxYpxZ (3D)px

Girar (rotate)

Plano (Z)degEje X (3D)degEje Y (3D)deg

Escalar (scale) Proporcional

Escala

Sesgar (skew)

XdegYdeg

3D y origen

Perspectiva del padre (0 = ninguna)px

transform-origin

center

Ocultar la cara trasera (backface-visibility) Mostrar posición original

Transform

.elemento {
  transform: rotate(15deg);
  transition: transform 0.3s ease;
}

Consejos de uso

• El orden importa. Las funciones se aplican de derecha a izquierda respecto al sistema de coordenadas: rotate(45deg) translateX(100px) no da el mismo resultado que translateX(100px) rotate(45deg). El generador usa el orden más intuitivo: mover → girar → escalar → sesgar.
• Para centrar un elemento posicionado de forma absoluta usa transform: translate(-50%, -50%): los porcentajes de translate se refieren al tamaño del propio elemento.
• Un hover sutil (translateY(-4px) o scale(1.03)) con transition hace que botones y tarjetas se sientan vivos.
• transform y opacity son las propiedades más baratas de animar: el navegador no tiene que recalcular el layout.
• Para tarjetas que se voltean necesitas: perspective en el padre, transform-style: preserve-3d en la tarjeta y backface-visibility: hidden en cada cara.

Combina con animaciones

Usa estos valores dentro de tus @keyframes en el constructor de animaciones y dale ritmo con una curva cubic-bezier.

Error común

Escribir dos veces transform en la misma regla no suma: la segunda reemplaza a la primera. Pon todas las funciones en una sola declaración separadas por espacios: transform: translateX(10px) rotate(5deg);.