Transformaciones

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 23 de 43.

CSS transform te permite cambiar la apariencia de un elemento al escalarlo, rotarlo, moverlo (trasladarlo) o sesgarlo. Estos cambios se aplican instantáneamente, a menos que se combinen con transiciones.

scale(): Cambia el tamaño de un elemento (hazlo más grande o más pequeño).
rotate(): Gira el elemento cierta cantidad de grados. Los valores positivos lo giran en el sentido de las agujas del reloj, los valores negativos lo giran en sentido contrario a las agujas del reloj.

translate(): Mueve el elemento a la izquierda/derecha o arriba/abajo. Los valores positivos lo mueven a la derecha (X) y hacia abajo (Y); los valores negativos lo mueven a la izquierda y hacia arriba.
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); 
}

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

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

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

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:

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 girar 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.

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>