Transformationen

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

Mit CSS transform können Sie das Erscheinungsbild eines Elements ändern, indem Sie es skalieren, drehen, verschieben (translatieren) oder neigen. Diese Änderungen werden sofort angewendet, sofern sie nicht mit Transitions kombiniert werden.

scale() – Die Größe eines Elements ändern (es größer oder kleiner machen).
rotate() – Das Element um Grad drehen.

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

Beispiele:

/* Macht das Bild 20% größer */
img {
  transform: scale(1.2); 
}

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

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

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Gegeben ist eine Galerie mit 4 Bildern, von denen jedes eine Klasse hat (img1, img2, usw.). Wende die folgenden Transformationen beim Hovern (Mauszeiger darüberbewegen) an:

Bild 1 (.img1): Verwende scale(), um das Bild beim Hovern um das 1,2-fache zu vergrößern.
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 um 20 Grad auf der X-Achse und 10 Grad auf der Y-Achse zu neigen.

Spickzettel

CSS transform ermöglicht es Ihnen, das Aussehen eines Elements zu verändern, indem Sie es skalieren, drehen, verschieben (translatieren) oder neigen.

scale() – Ein Element in der Größe verändern (vergrößern oder verkleinern)
rotate() – Das Element um Grad drehen
translate() – Das Element nach links/rechts oder oben/unten verschieben
skew() – Das Element entlang der X- oder Y-Achse neigen

/* Macht das Bild 20 % größer */
img {
  transform: scale(1.2); 
}

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

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

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

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.