Transformations

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 23 sur 43.

La propriété CSS transform vous permet de modifier l'apparence d'un élément en changeant son échelle, en le faisant pivoter, en le déplaçant (translation) ou en l'inclinant. Ces modifications sont appliquées instantanément, à moins d'être combinées avec des transitions.

scale() – Redimensionner un élément (le rendre plus grand ou plus petit).
rotate() – Faire pivoter l'élément par degrés.

translate() – Déplace l'élément vers la gauche/droite ou vers le haut/bas.
skew() – Incline l'élément le long de l'axe X ou Y.

Exemples :

/* Rend l'image 20 % plus grande */
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); 
}

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

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

Image 1 (.img1) : Utilisez scale() pour agrandir l'image de 1.2 fois lors du survol.
Image 2 (.img2) : Utilisez rotate() pour faire pivoter l'image de 45 degrés lors du survol.
Image 3 (.img3) : Utilisez translate() pour déplacer l'image de -5px vers la droite et de -3px vers le bas lors du 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 lors du survol.

Aide-mémoire

La propriété 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.

scale() – Redimensionner un élément (le rendre plus grand ou plus petit)
rotate() – Faire pivoter l'élément par degrés
translate() – Déplacer l'élément vers la gauche/droite ou vers le haut/bas
skew() – Incliner l'élément le long de l'axe X ou Y

/* Rend l'image 20 % plus grande */
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); 
}

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>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.