Las transformaciones CSS cambian la posición, el tamaño y la orientación de los elementos sin afectar el flujo de documentos. Rotar, escalar, traducir y sesgar se pueden combinar en una sola propiedad de transformación y se animan suavemente con transiciones CSS.
Arrastre los controles deslizantes para ver cada transformación aplicada en tiempo real. El rectángulo discontinuo muestra la posición original mientras que la tarjeta sólida muestra el resultado transformado. Copie el valor de transformación completo cuando esté satisfecho.
Frequently Asked Questions
Q: ¿Cuál es la diferencia entre traducir y posicionar?
¿Cuál es la diferencia entre traducir y posicionar? Traducir mueve un elemento visualmente sin cambiar el flujo de diseño. La posición (arriba/izquierda) elimina el elemento del flujo o desplaza a los hermanos. Translate también está acelerado por GPU y es más rápido de animar.
Q: ¿La transformación afecta el diseño?
¿La transformación afecta el diseño? No. Los elementos transformados mantienen su espacio original en el flujo del documento, por lo que la superposición y el desbordamiento son comunes: use márgenes o relleno para reservar espacio.
Q: ¿Puedo combinar múltiples transformaciones?
¿Puedo combinar múltiples transformaciones? Sí, enumérelos separados por espacios en una propiedad: transform: traducirX(10px) rotar(45deg) escala(1.2); Se aplican de derecha a izquierda en el sistema de coordenadas.
Q: ¿Por qué mi elemento rotado está borroso?
¿Por qué mi elemento rotado está borroso? Las rotaciones en ángulos que no son de 90 grados provocan artefactos de suavizado. Agregar una escala pequeña (1.001) o usar will-change: transform puede ayudar en algunos navegadores.
Q: ¿La transformación funciona con la animación?
¿La transformación funciona con la animación? Sí, transformar es una de las propiedades más baratas de animar. Combínelo con @keyframes o transiciones: la composición GPU lo hace fluido incluso en dispositivos móviles.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.