Transformations

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

CSS transform vous permet de modifier l’apparence d’un élément en le redimensionnant, 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 avec des transitions.

scale() : Redimensionner un élément (le rendre plus grand ou plus petit).
rotate() : Faire pivoter l’élément de plusieurs degrés.

translate() : Déplacez l’élément vers la gauche/droite ou vers le haut/bas.
skew() : Inclinez l’élément le long de l’axe X ou Y.

Exemples :

/* 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); 
}

Défi

Facile

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

Image 1 (.img1) : utilisez scale() pour rendre l’image 1,2 fois plus grande au survol.
Image 2 (.img2) : utilisez rotate() pour faire pivoter l’image de 45 degrés au survol.
Image 3 (.img3) : utilisez translate() pour déplacer l’image de -5px vers la droite et de -3px vers le bas au survol.
Image 4 (.img4) : utilisez 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>