6XC

Generador de Transform CSS

Combina rotate, scale, translate y skew visualmente y copia el CSS transform resultante.

968 visitas

La Propiedad transform

transform mueve, rota, escala e inclina un elemento sin afectar el flujo del documento, y está acelerada por GPU — por eso transform (junto con opacity) es la propiedad preferida para animaciones fluidas. Las funciones se aplican de derecha a izquierda, así que su orden importa: rotate(45deg) translateX(50px) no es lo mismo que al revés.

Preguntas Frecuentes

¿Por qué importa el orden de las funciones?

Cada función transforma el sistema de coordenadas para la siguiente. translate y luego rotate mueve primero y gira en su sitio; rotate y luego translate gira primero el eje, así que el movimiento va en diagonal.

¿transform afecta a los elementos circundantes?

No — el elemento mantiene su espacio original en el diseño. Eso hace que transform sea económico de animar, pero exige prestar atención a las superposiciones.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar