Transformacje

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 23 z 43.

CSS transform pozwala zmienić wygląd elementu przez skalowanie, obracanie, przesuwanie (translację) lub pochylanie go. Zmiany te są stosowane natychmiast, chyba że zostaną połączone z przejściami.

scale(): Zmień rozmiar elementu (powiększ go lub pomniejsz).
rotate(): Obróć element o określoną liczbę stopni. Wartości dodatnie obracają go zgodnie z ruchem wskazówek zegara, a ujemne — przeciwnie do ruchu wskazówek zegara.

translate(): Przesuwa element w lewo/w prawo lub w górę/w dół. Wartości dodatnie przesuwają go w prawo (X) i w dół (Y), a wartości ujemne — w lewo i w górę.
skew(): Pochyla element wzdłuż osi X lub Y.

Przykłady:

/* Powiększa obraz o 20% */
img {
  transform: scale(1.2); 
}

/* Obraca pudełko o 45 stopni zgodnie z ruchem wskazówek zegara */
.box {
  transform: rotate(45deg); 
}

/* Przesuwa element o 50px w prawo i o 100px w dół */
div {
  transform: translate(50px, 100px); 
}

/* Pochyla element o 20 stopni względem osi X i o 10 stopni względem osi Y */
div {
  transform: skew(20deg, 10deg); 
}

Wyzwanie

Łatwy

Mając galerię z 4 obrazami, z których każdy ma klasę (img1, img2 itd.), zastosuj następujące transformacje po najechaniu kursorem:

Obraz 1 (.img1): Użyj scale(), aby po najechaniu kursorem obraz był 1,2 raza większy.
Obraz 2 (.img2): Użyj rotate(), aby po najechaniu kursorem obrócić obraz o 45 stopni.
Obraz 3 (.img3): Użyj translate(), aby po najechaniu kursorem przesunąć obraz o -5px w prawo i -3px w dół.
Obraz 4 (.img4): Użyj skew(), aby po najechaniu kursorem pochylić obraz o 20 stopni względem osi X i o 10 stopni względem osi Y.

Spróbuj swoich sił

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