Herramientas CSS/Generador de Transform CSS
Generador de Transform CSS
Crea transformaciones CSS visualmente con controles de traducción, rotación, escala y sesgo
Controles de Transformación
Trasladar
0px
0px
Rotar
0°
Escalar
1.0
1.0
1.0
Sesgar
0°
0°
Presets
Vista Previa
Elemento
El borde punteado muestra la posición original
Código CSS
css
Loading...Guía de CSS Transform
Aprende sobre transformaciones CSS y cómo crear efectos visuales
¿Qué es CSS Transform?
Las transformaciones CSS te permiten modificar la presentación visual de los elementos trasladando (moviendo), rotando, escalando y sesgándolos. Las transformaciones no afectan el flujo del documento - otros elementos permanecen en su lugar mientras el elemento transformado se mueve visualmente.
Funciones de Transformación
- translate(): Mueve elementos horizontal y verticalmente
- rotate(): Rota elementos alrededor de un punto central
- scale(): Aumenta o disminuye el tamaño del elemento
- skew(): Inclina elementos a lo largo de los ejes X e Y
Cómo Usar
- Usa los controles de traslación para mover el elemento
- Ajusta la rotación para girar el elemento
- Escala para cambiar el tamaño del elemento
- Habilita el modo 3D para transformaciones con perspectiva
Consejos
- Combina múltiples transformaciones para efectos complejos
- Usa transform-origin para cambiar el punto de pivote
- Las transformaciones 3D necesitan perspective en el elemento padre
Preguntas Frecuentes
¿Cuál es la diferencia entre translate y position?
Translate mueve un elemento visualmente sin afectar el flujo del documento - otros elementos permanecen en su lugar. Position (relative, absolute) puede afectar el diseño y elementos hermanos. Translate también tiene aceleración GPU, lo que lo hace mejor para animaciones.
¿Cómo cambio el transform origin?
Usa la propiedad transform-origin para establecer el punto de pivote. El valor predeterminado es 'center center'. Puedes usar palabras clave (top, left, center, right, bottom), porcentajes o valores en píxeles. Por ejemplo, 'transform-origin: top left' rota desde la esquina superior izquierda.
¿Por qué no funciona mi transformación 3D?
Las transformaciones 3D requieren perspective para mostrar profundidad. Añade 'perspective: 1000px' al elemento padre. También asegúrate de que 'transform-style: preserve-3d' esté configurado si tienes transformaciones 3D anidadas. El valor de perspective controla cuán pronunciado aparece el efecto 3D.
¿Puedo animar transformaciones?
Sí, las transformaciones son ideales para animaciones. Usa transiciones CSS o animaciones de keyframe en la propiedad transform. Las transformaciones tienen aceleración por hardware, proporcionando animaciones suaves de 60fps. Combina con 'will-change: transform' para el mejor rendimiento.
¿En qué orden se aplican las transformaciones?
Las transformaciones se aplican de derecha a izquierda. 'transform: rotate(45deg) translate(100px)' primero traslada, luego rota. El orden importa porque cada transformación afecta a las siguientes. Para trasladar y luego rotar, usa 'transform: translate(100px) rotate(45deg)'.