Elysia Tools
Navegación
Design
Genera propiedades de transformación CSS
Ejecución
Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.
Ejemplos
Relacionado
Listo para ejecutar
Guía de uso de la herramienta
El Generador de Transformaciones CSS es una herramienta intuitiva diseñada para crear y visualizar propiedades de transformación CSS de forma rápida, permitiéndote ajustar rotaciones, escalas, traslaciones e inclinaciones con precisión.
Contexto
Necesito que un icono de menú rote 45 grados al hacer clic para indicar un estado activo.
Problema
Calcular la sintaxis correcta de la transformación sin errores de sintaxis.
Cómo usarlo
Mueve el control deslizante de 'Rotar' hasta 45 y copia el resultado.
rotate: 45Resultado
Obtienes 'transform: rotate(45deg);' listo para usar en tu CSS.
Contexto
Quiero que las imágenes de una galería aumenten ligeramente su tamaño al pasar el cursor.
Problema
Ajustar la escala de forma proporcional para evitar deformaciones.
Cómo usarlo
Ajusta 'Escala X' y 'Escala Y' a 1.1 y copia el código generado.
scaleX: 1.1, scaleY: 1.1Resultado
Genera la propiedad 'transform' completa incluyendo rotate, scale, translate y skew.
Sí, la herramienta combina todos los valores ajustados en una única línea de código CSS.
La propiedad 'transform' es compatible con todos los navegadores modernos.
Simplemente copia el código generado y pégalo en la clase CSS del elemento que deseas transformar.
Esta herramienta utiliza grados para rotación/inclinación y píxeles para traslación, siguiendo los estándares CSS.
Obtienes 'transform: scaleX(1.1) scaleY(1.1);' para aplicar en el selector :hover.