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 escalándolo, girándolo, moviéndolo (trasladándolo) o sesgándolo. 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(): Rota el elemento en grados.

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

Ejemplos:

/* Makes the image 20% larger */
img {
  transform: scale(1.2); 
}

/* Rotates the box 45 degrees clockwise */
.box {
  transform: rotate(45deg); 
}

/* Moves the element 50px to the right and 100px down */
div {
  transform: translate(50px, 100px); 
}

/* Skews the element 20 degrees on the X axis and 10 degrees on the Y axis */
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 rotar la imagen 45 grados al pasar el cursor.
Imagen 3 (.img3): Usa translate() para mover la imagen -5px hacia 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>