Trasformazioni

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

CSS transform ti consente di cambiare 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 (ingrandiscilo o rimpiccioliscilo).
rotate(): Ruota l'elemento di un certo numero di gradi.

translate(): Sposta l'elemento a sinistra/destra o in alto/in basso.
skew(): Inclina l'elemento lungo l'asse X o Y.

Esempi:

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

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

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

/* Inclina l'elemento di 20 gradi sull'asse X e di 10 gradi sull'asse 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 ingrandire l'immagine di 1.2 volte 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 a destra e -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>