Generador de Transformaciones CSS 2D y 3D para efectos visuales

¿Necesitas crear efectos visuales dinámicos para tus elementos web? Este generador de transformaciones CSS te permite aplicar efectos 2D y 3D como rotación, escala, traslación, inclinación y perspectiva. Perfecto para animaciones, tarjetas interactivas, galerías 3D y elementos con efectos visuales avanzados.

✓ Rotación, escala y traslación 2D ✓ Inclinación (skew) ✓ Modo 3D con rotateX/Y/Z ✓ Perspectiva personalizable ✓ Vista previa en tiempo real ✓ Código CSS listo para copiar

Aplica transformaciones 2D y 3D a elementos: rotación, escala, traslación, inclinación y perspectiva. Copia el código CSS listo para usar.

* Los cambios se actualizan en tiempo real

Transformaciones 2D
Transformaciones 3D
Vista previa

Elemento transformado

Código CSS

                    
Ejemplos rápidos:
Historial de transformaciones

No hay transformaciones guardadas

Preguntas frecuentes sobre transformaciones CSS

¿Qué son las transformaciones CSS?

Las transformaciones CSS permiten modificar la posición, forma y orientación de elementos HTML en 2D o 3D usando propiedades como rotate, scale, translate, skew y perspective.

¿Cómo usar este generador de transformaciones?

Ajusta los controles para rotar, escalar, trasladar o inclinar elementos. Activa el modo 3D para efectos de perspectiva y rotación tridimensional. La vista previa se actualiza en tiempo real.

¿Cuál es la diferencia entre translate y position?

Translate mueve un elemento desde su posición original sin afectar el flujo del documento. Position cambia la posición en el layout y puede afectar a otros elementos.

¿Qué es la perspectiva en CSS 3D?

La perspectiva define qué tan pronunciado es el efecto 3D. Valores más pequeños crean efectos más dramáticos, mientras que valores más grandes son más sutiles.

¿Las transformaciones CSS son compatibles con todos los navegadores?

Sí, las transformaciones CSS son compatibles con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Para versiones antiguas, se usan prefijos como -webkit-.