Transformaciones

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 23 de 43.

CSS transform te permite cambiar la apariencia de un elemento escalándolo, rotándolo, moviéndolo (trasladándolo) o inclinándolo. Estos cambios se aplican instantáneamente a menos que se combinen con transiciones.

scale() – Redimensionar un elemento (hacerlo más grande o más pequeño).
rotate() – Rotar el elemento por grados.

translate() – Mueve el elemento a la izquierda/derecha o arriba/abajo.
skew() – Inclina el elemento a lo largo del eje X o Y.

Ejemplos:

/* Hace que la imagen sea un 20% más grande */
img {
  transform: scale(1.2); 
}

/* Rota la caja 45 grados en sentido horario */
.box {
  transform: rotate(45deg); 
}

/* Mueve el elemento 50px a la derecha y 100px hacia abajo */
div {
  transform: translate(50px, 100px); 
}

/* Inclina el elemento 20 grados en el eje X y 10 grados en el eje Y */
div {
  transform: skew(20deg, 10deg); 
}

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Dada una galería con 4 imágenes, cada una con una clase (img1, img2, etc.), aplica las siguientes transformaciones al pasar el cursor (on hover):

Imagen 1 (.img1): Usa scale() para hacer que la imagen sea 1.2 veces más grande al pasar el cursor.
Imagen 2 (.img2): Usa rotate() para rotar la imagen 45 grados al pasar el cursor.
Imagen 3 (.img3): Usa translate() para mover la imagen -5px a la derecha y -3px hacia abajo al pasar el cursor.
Imagen 4 (.img4): Usa skew() para inclinar la imagen 20 grados en el eje X y 10 grados en el eje Y al pasar el cursor.

Hoja de referencia

transform de CSS te permite cambiar la apariencia de un elemento escalándolo, rotándolo, moviéndolo (trasladándolo) o inclinándolo.

scale() – Cambia el tamaño de un elemento (hazlo más grande o más pequeño)
rotate() – Rota el elemento por grados
translate() – Mueve el elemento a la izquierda/derecha o arriba/abajo
skew() – Inclina el elemento a lo largo del eje X o Y

/* Hace que la imagen sea un 20% más grande */
img {
  transform: scale(1.2); 
}

/* Rota la caja 45 grados en el sentido de las agujas del reloj */
.box {
  transform: rotate(45deg); 
}

/* Mueve el elemento 50px a la derecha y 100px hacia abajo */
div {
  transform: translate(50px, 100px); 
}

/* Inclina el elemento 20 grados en el eje X y 10 grados en el eje Y */
div {
  transform: skew(20deg, 10deg); 
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="img1">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="img2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="img3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="img4">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.