Generador de CSS Transform

¿Qué es un generador de CSS transform?

La propiedad transform de CSS permite mover, girar, redimensionar e inclinar un elemento sin afectar el diseño que lo rodea. Escribir esas funciones a mano implica recordar la sintaxis de translateX, rotate, scale, skewX y las demás, y adivinar cómo se combinan. Este generador te ofrece un control deslizante para cada función de transform, las aplica en una caja de vista previa en vivo y escribe el CSS de transform correspondiente por ti. Incluye solo las funciones que realmente cambiaste, así que la salida queda corta y legible.

Cómo usar el generador de CSS transform

Crear una transformación toma solo unos pocos pasos:

1. Arrastra los controles de translate para mover la caja en los ejes X e Y.
2. Define un ángulo de rotación en grados para girar el elemento alrededor de su origen.
3. Aumenta o reduce la escala del elemento, de forma uniforme o con factores X e Y separados.
4. Agrega inclinación en el eje X o Y y, si quieres, una perspectiva y un origen de la transformación.
5. Copia el CSS de transform generado y aplícalo en tu propio elemento.

¿Cómo funcionan las funciones de transform de CSS?

translateX y translateY desplazan un elemento por una longitud sin cambiar su posición en el flujo del documento. rotate lo gira por un ángulo en grados alrededor del transform-origin. scale multiplica su tamaño, donde 1 es el tamaño original, los valores por encima de 1 lo agrandan y los valores por debajo de 1 lo reducen. skewX y skewY inclinan el elemento a lo largo de un eje. perspective añade profundidad para que las rotaciones y las escalas se vean tridimensionales. Las funciones se aplican en el orden en que aparecen, y por eso el generador las emite en una secuencia fija y predecible.

¿Qué es transform-origin?

transform-origin define el punto alrededor del cual se gira, escala e inclina un elemento. El valor por defecto es el centro del elemento, pero puedes anclarlo en una esquina o en un borde, como superior izquierda o inferior derecha. Cambiar el origen mantiene las mismas funciones de transform, pero las pivota alrededor de otro punto, lo que resulta útil para efectos como una tarjeta que voltea desde un borde o una insignia que gira alrededor de una esquina.

¿Por qué usar este generador de CSS transform?

• 100 % gratis, sin anuncios, registro ni límites.
• Vista previa en vivo que se actualiza al instante a medida que arrastras cada control.
• Cubre translate, rotate, scale, skew, perspective y transform-origin.
• Genera CSS de transform limpio que omite las funciones no modificadas.
• Copia el CSS generado al portapapeles con un clic.
• Funciona por completo en tu navegador, así que no se sube nada.

Preguntas frecuentes