Generador de Transformaciones
Crea y previsualiza visualmente las propiedades de transformación CSS.
CSS Transform es una potente propiedad CSS que te permite transformar elementos web en un espacio 2D o 3D. A través de transformaciones como translate, rotate, scale y skew, puedes crear diseños web dinámicos e interactivos. Crea fácilmente los efectos deseados con vista previa en tiempo real.
transform: none;Funciones de Transformación
- • translate(x, y): translate(x, y): Mover elemento por x, y cantidad
- • scale(x, y): scale(x, y): Escalar elemento por relación x, y
- • rotate(angle): rotate(angle): Rotar elemento por ángulo
- • skew(x, y): skew(x, y): Inclinar elemento por x, y grados
Consejos de Uso
- • Se pueden combinar múltiples funciones de transformación con espacios
- • Cambiar el origen de la transformación con transform-origin
- • Usar con transition para crear efectos de animación
- • Usar la propiedad perspective para transformaciones 3D
🎯 Conceptos Básicos de Transformación
CSS Transform es una propiedad CSS que cambia la forma, el tamaño y la posición de los elementos. Permite la transformación visual de elementos sin interrumpir el flujo normal del documento.
Sintaxis básica:
transform: function(value) function(value) ...;📐 Detalles de la Función Transform
🔄 Translate (Movimiento)
- •
translate(x, y): translate(x, y): Mover a lo largo de los ejes X, Y - •
translateX(x): translateX(x): Mover solo a lo largo del eje X - •
translateY(y): translateY(y): Mover solo a lo largo del eje Y - •
translate3d(x, y, z): translate3d(x, y, z): Movimiento 3D
transform: translate(50px, 100px);📏 Scale (Redimensionamiento)
- •
scale(x, y): scale(x, y): Escalar ejes X, Y - •
scaleX(x): scaleX(x): Escalar solo el eje X - •
scaleY(y): scaleY(y): Escalar solo el eje Y - • Mayor que 1 agranda, menor que 1 encoge
transform: scale(1.5, 0.8);🔄 Rotate (Rotación)
- •
rotate(angle): rotate(angle): Rotar alrededor del eje Z - •
rotateX(angle): rotateX(angle): Rotar alrededor del eje X - •
rotateY(angle): rotateY(angle): Rotar alrededor del eje Y - • Usar unidades deg, rad, turn para ángulos
transform: rotate(45deg);📐 Skew (Inclinación)
- •
skew(x, y): skew(x, y): Inclinar a lo largo de los ejes X, Y - •
skewX(angle): skewX(angle): Inclinar a lo largo del eje X - •
skewY(angle): skewY(angle): Inclinar a lo largo del eje Y - • Transformar en forma de paralelogramo
transform: skew(15deg, 5deg);🎨 Transform Origin (Punto de Transformación)
La propiedad transform-origin establece el punto de origen de la transformación. Por defecto es el centro del elemento (50% 50%).
Usando palabras clave
transform-origin: top left;Usando porcentajes
transform-origin: 25% 75%;Usando píxeles
transform-origin: 10px 20px;⚡ Consejos de Optimización de Rendimiento
✅ Recomendaciones
- • Animar solo transform y opacity
- • Usar la propiedad will-change
- • Usar aceleración 3D (translateZ(0))
- • Crear capas compuestas para un mejor rendimiento
❌ Cosas a Evitar
- • Animar ancho, alto
- • Animar posiciones left, top
- • Anidamiento excesivo de transformaciones
- • Uso innecesario de will-change
Ejemplo de optimización de rendimiento:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animación y Transiciones
Transform se puede usar con CSS Transition y Animation para crear efectos suaves.
Ejemplo de transición
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Ejemplo de animación de fotogramas clave
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Compatibilidad del Navegador
CSS Transform es compatible con todos los navegadores modernos, pero pueden ser necesarios prefijos de proveedor para navegadores más antiguos.
Ejemplo de prefijo de proveedor:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Ejemplos de Uso en el Mundo Real
Efecto hover de tarjeta
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Spinner de carga
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Efecto de entrada de modal
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Efecto de clic de botón
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Herramientas de Depuración y Desarrollo
Herramientas de Desarrollo del Navegador
- • Edición en tiempo real en el panel Elementos
- • Verificar valores finales en la pestaña Calculado
- • Análisis de rendimiento con la pestaña Rendimiento
- • Verificar la estructura de capas con la Vista 3D
Propiedades CSS Útiles
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Consejos Pro
Consejo de Rendimiento
Usar transform3d() o translateZ(0) para crear capas compuestas para la aceleración de GPU puede mejorar significativamente el rendimiento de la animación.
Consejo de Accesibilidad
Usa la media query prefers-reduced-motion para proporcionar alternativas a los usuarios sensibles al movimiento.
Consejo de Diseño
Configurar correctamente transform-origin puede crear efectos de transformación más naturales.
Consejo de Desarrollo
Usar variables CSS para controlar dinámicamente los valores de transformación facilita la integración con JavaScript.