Transformations

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 23 sur 43.

CSS transform permet de modifier l’apparence d’un élément en le mettant à l’échelle, en le faisant pivoter, en le déplaçant (translation) ou en l’inclinant. Ces modifications sont appliquées instantanément, sauf si elles sont combinées à des transitions.

scale() : Redimensionner un élément (le rendre plus grand ou plus petit).
rotate() : Faire pivoter l’élément de quelques degrés. Les valeurs positives le font tourner dans le sens des aiguilles d’une montre, les valeurs négatives dans le sens inverse.

translate() : Déplace l’élément vers la gauche/la droite ou vers le haut/le bas. Les valeurs positives le déplacent vers la droite (X) et vers le bas (Y), les valeurs négatives vers la gauche et vers le haut.
skew() : Incline l’élément le long de l’axe X ou Y.

Exemples :

/* Agrandit l’image de 20 % */
img {
  transform: scale(1.2); 
}

/* Fait pivoter la boîte de 45 degrés dans le sens des aiguilles d’une montre */
.box {
  transform: rotate(45deg); 
}

/* Déplace l'élément de 50px vers la droite et de 100px vers le bas */
div {
  transform: translate(50px, 100px); 
}

/* Incline l’élément de 20 degrés sur l’axe X et de 10 degrés sur l’axe Y */
div {
  transform: skew(20deg, 10deg); 
}

Défi

Facile

Étant donné une galerie de 4 images, chacune avec une classe (img1, img2, etc.), applique les transformations suivantes au survol :

Image 1 (.img1) : utilise scale() pour agrandir l’image 1.2 fois au survol.
Image 2 (.img2) : utilise rotate() pour faire pivoter l’image de 45 degrés au survol.
Image 3 (.img3) : utilise translate() pour déplacer l’image de -5px vers la droite et de -3px vers le bas au survol.
Image 4 (.img4) : utilise skew() pour incliner l’image de 20 degrés sur l’axe X et de 10 degrés sur l’axe Y au survol.

Essayez vous-même

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