Trasformazioni

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 23 di 43.

CSS transform ti permette di modificare l’aspetto di un elemento ridimensionandolo, ruotandolo, spostandolo (traslandolo) o inclinandolo. Queste modifiche vengono applicate istantaneamente, a meno che non siano combinate con transizioni.

scale(): Ridimensiona un elemento (lo ingrandisce o lo rimpicciolisce).
rotate(): Ruota l’elemento di un certo numero di gradi. I valori positivi lo ruotano in senso orario, quelli negativi in senso antiorario.

translate(): Sposta l'elemento a sinistra/destra o in alto/in basso. I valori positivi lo spostano a destra (X) e in basso (Y), i valori negativi lo spostano a sinistra e in alto.
skew(): Inclina l'elemento lungo l'asse X o Y.

Esempi:

/* Ingrandisce l'immagine del 20% */
img {
  transform: scale(1.2); 
}

/* Ruota la casella di 45 gradi in senso orario */
.box {
  transform: rotate(45deg); 
}

/* Sposta l'elemento di 50px a destra e di 100px verso il basso */
div {
  transform: translate(50px, 100px); 
}

/* Inclina l'element 20 graus sobre l'eix X i 10 graus sobre l'eix Y */
div {
  transform: skew(20deg, 10deg); 
}

Sfida

Facile

Data una galleria con 4 immagini, ciascuna con una classe (img1, img2, ecc.), applica le seguenti trasformazioni al passaggio del mouse:

Immagine 1 (.img1): usa scale() per rendere l'immagine 1,2 volte più grande al passaggio del mouse.
Immagine 2 (.img2): usa rotate() per ruotare l'immagine di 45 gradi al passaggio del mouse.
Immagine 3 (.img3): usa translate() per spostare l'immagine di -5px verso destra e di -3px verso il basso al passaggio del mouse.
Immagine 4 (.img4): usa skew() per inclinare l'immagine di 20 gradi sull'asse X e di 10 gradi sull'asse Y al passaggio del mouse.

Provalo tu

<!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>