Generador de CSS transform
Arrastra los controles deslizantes para mover, rotar, escalar e inclinar una caja, elige el transform-origin y añade inclinación 3D con perspectiva. La vista previa y el CSS se actualizan en vivo, junto con la matrix() equivalente.
Última actualización:
Translate
Rotate y skew
Scale
3D
Origen de la transformación
Cómo usar Generador de CSS transform
- Empieza con un ajuste predefinido o arrastra los controles deslizantes. Escribe valores exactos en los campos numéricos.
- Define el origen de la transformación con la cuadrícula de 3×3 o porcentajes X/Y personalizados; el punto naranja muestra el punto de giro.
- Activa el 3D para inclinar el elemento con rotateX y rotateY; los valores de perspectiva más bajos dan un efecto más fuerte.
- Cambia el orden de las funciones para ver por qué rotar y luego desplazar es distinto de desplazar y luego rotar.
- Copia el CSS o marca la opción :hover para obtener un efecto hover listo para usar con transición.
Funciones de CSS transform de un vistazo
| Función | Ejemplo | Efecto | Valor de identidad |
|---|---|---|---|
| translate(x, y) | translate(40px, -10px) | Mueve 40px a la derecha y 10px hacia arriba | 0, 0 |
| rotate(a) | rotate(15deg) | Gira en el sentido de las agujas del reloj alrededor del origen (negativo = en sentido contrario) | 0deg |
| scale(x, y) | scale(1.2) o scale(-1, 1) | Redimensiona; 1 = tamaño original, los valores negativos reflejan | 1 |
| skew(x, y) | skewX(-15deg) | Inclina el elemento a lo largo de un eje | 0deg |
| rotateX / rotateY | rotateY(30deg) | Rotación 3D alrededor del eje horizontal o vertical | 0deg |
| perspective(d) | perspective(800px) | Distancia del espectador para las funciones 3D que le siguen | none |
| matrix(a, b, c, d, e, f) | matrix(1, 0, 0, 1, 40, 0) | Todas las funciones 2D combinadas en una sola matriz afín | 1, 0, 0, 1, 0, 0 |
Cómo se calcula la matriz
Cada función 2D es una matriz de 3×3, y una lista de transformaciones las multiplica de izquierda a derecha. Para una rotación de ángulo θ, la matriz es matrix(cos θ, sin θ, −sin θ, cos θ, 0, 0); el escalado por (sx, sy) es matrix(sx, 0, 0, sy, 0, 0); el desplazamiento por (tx, ty) es matrix(1, 0, 0, 1, tx, ty); la inclinación por (α, β) es matrix(1, tan β, tan α, 1, 0, 0). Por ejemplo, rotate(30deg) se convierte en matrix(0.866, 0.5, −0.5, 0.866, 0, 0). El generador muestra la matriz combinada de tus ajustes, que también es lo que devuelve getComputedStyle().
Consejos prácticos
- Usa
transform: translate(-50%, -50%)contop: 50%; left: 50%para centrar un elemento con posición absoluta de tamaño desconocido. - Los porcentajes en translate se refieren al tamaño del propio elemento, no al de su contenedor.
- Las transformaciones no funcionan en elementos en línea como un simple
<span>; daledisplay: inline-block. - Combina las transformaciones con
transitiono@keyframespara lograr un movimiento suave; el generador de animaciones CSS crea los keyframes por ti. - Respeta a los usuarios que prefieren menos movimiento desactivando las transformaciones grandes dentro de
@media (prefers-reduced-motion: reduce).
Preguntas frecuentes
¿Qué hace la propiedad CSS transform?
transform cambia cómo se dibuja un elemento sin alterar el diseño de la página a su alrededor. Puede mover (translate), girar (rotate), redimensionar (scale) e inclinar (skew) el elemento, en 2D o en 3D. Los elementos vecinos mantienen su lugar, como si el elemento conservara su tamaño y posición originales.
¿Por qué importa el orden de las funciones de transform?
Las funciones se aplican de derecha a izquierda en el sistema de coordenadas del elemento, así que cada una cambia los ejes de las anteriores. translate(100px) rotate(45deg) mueve el elemento a la derecha y luego lo gira en el sitio, mientras que rotate(45deg) translate(100px) lo mueve 100px a lo largo del eje diagonal ya girado.
¿Qué es transform-origin?
Es el punto fijo alrededor del cual se producen la rotación, el escalado y la inclinación. El valor predeterminado es el centro (50% 50%). Si lo pones en top left, el elemento gira alrededor de su esquina superior izquierda, como una bisagra de puerta en esa esquina.
¿Cómo volteo un elemento con CSS?
Usa una escala negativa: transform: scaleX(-1) lo refleja horizontalmente y scaleY(-1) lo voltea verticalmente. El texto y las imágenes también se reflejan. Usa los ajustes predefinidos Voltear horizontal y Voltear vertical para probarlo.
¿Cuál es la diferencia entre transform y las propiedades translate, rotate y scale?
Los navegadores modernos también admiten las propiedades separadas translate, rotate y scale. Son útiles para animar una parte cada vez, pero siempre se aplican en el orden fijo translate, rotate, scale y no pueden expresar skew. La herramienta muestra la versión con propiedades individuales cuando da el mismo resultado.
¿Afecta transform al rendimiento?
Las transformaciones están entre las propiedades más baratas de animar, porque los navegadores normalmente pueden mover en la GPU el elemento ya pintado sin recalcular el diseño. Animar width, height, top o left, en cambio, provoca un recálculo del diseño y es más lento.
¿Qué hace perspective()?
perspective(n) define a qué distancia está el espectador de la pantalla, en píxeles, para las transformaciones 3D. Los valores pequeños, como 300px, dan un efecto dramático y cercano; los grandes, como 1500px, se ven más planos. Debe ir en primer lugar en la lista de transformaciones para afectar a las funciones 3D que le siguen.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.