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 verzerrst. Diese Änderungen werden sofort angewendet, sofern sie nicht mit Übergängen kombiniert werden.

scale(): Ein Element skalieren (größer oder kleiner machen).
rotate(): Das Element um eine bestimmte Gradzahl drehen. Positive Werte drehen es im Uhrzeigersinn, negative Werte gegen den Uhrzeigersinn.

translate(): Verschiebe das Element nach links/rechts oder nach oben/unten. Positive Werte bewegen es nach rechts (X) und nach unten (Y), negative Werte nach links und oben.
skew(): Neige das Element entlang der X- oder Y-Achse.

Beispiele:

/* Vergrößert das Bild um 20% */
img {
  transform: scale(1.2); 
}

/* Dreht die Box um 45 Grad im Uhrzeigersinn */
.box {
  transform: rotate(45deg); 
}

/* Verschiebt das Element um 50px nach rechts und um 100px nach unten */
div {
  transform: translate(50px, 100px); 
}

/* Schert das Element um 20 Grad entlang der X-Achse und um 10 Grad entlang der Y-Achse */
div {
  transform: skew(20deg, 10deg); 
}

Aufgabe

Einfach

Wende bei einer Galerie mit 4 Bildern, jeweils mit einer Klasse (img1, img2 usw.), die folgenden Transformationen beim Darüberfahren mit der Maus an:

Bild 1 (.img1): Verwende scale(), um das Bild beim Darüberfahren mit der Maus 1.2-mal so groß zu machen.
Bild 2 (.img2): Verwende rotate(), um das Bild beim Darüberfahren mit der Maus um 45 Grad zu drehen.
Bild 3 (.img3): Verwende translate(), um das Bild beim Darüberfahren mit der Maus -5px nach rechts und -3px nach unten zu verschieben.
Bild 4 (.img4): Verwende skew(), um das Bild beim Darüberfahren mit der Maus um 20 Grad auf der X-Achse und 10 Grad auf der Y-Achse 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>