Transformationen

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 23 von 43.

Mit CSS transform kannst du das Erscheinungsbild eines Elements ändern, indem du es skalierst, drehst, verschiebst (translatierst) oder neigst. Diese Änderungen werden sofort angewendet, sofern sie nicht mit Übergängen kombiniert werden.

scale(): Ändert die Größe eines Elements (macht es größer oder kleiner).
rotate(): Dreht das Element um Grad.

translate(): Verschiebt das Element nach links/rechts oder nach oben/unten.
skew(): Neigt das Element entlang der X- oder Y-Achse.

Beispiele:

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

Aufgabe

Einfach

Gegeben ist eine Galerie mit 4 Bildern, jedes mit einer Klasse (img1, img2 usw.). Wende beim Hover die folgenden Transformationen an:

Bild 1 (.img1): Verwende scale(), um das Bild beim Hovern 1,2-mal größer zu machen.
Bild 2 (.img2): Verwende rotate(), um das Bild beim Hovern um 45 Grad zu drehen.
Bild 3 (.img3): Verwende translate(), um das Bild beim Hovern um -5px nach rechts und -3px nach unten zu verschieben.
Bild 4 (.img4): Verwende skew(), um das Bild beim Hovern auf der X-Achse um 20 Grad und auf der Y-Achse um 10 Grad zu neigen.

Probier es selbst

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