המרה

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 23 מתוך 43.

CSS transform מאפשר לשנות את המראה של רכיב באמצעות שינוי קנה מידה, סיבוב, הזזה או הטיה שלו. השינויים האלה מוחלים באופן מיידי, אלא אם משלבים אותם עם מעברים.

scale(): שינוי גודל של רכיב (הגדלה או הקטנה).
rotate(): סיבוב הרכיב במעלות.

translate(): הזזת האלמנט שמאלה/ימינה או למעלה/למטה.
skew(): הטיית האלמנט לאורך ציר X או Y.

דוגמאות:

/* מגדיל את התמונה ב-20% */
img {
  transform: scale(1.2); 
}

/* מסובב את התיבה 45 מעלות בכיוון השעון */
.box {
  transform: rotate(45deg); 
}

/* מזיז את האלמנט 50px ימינה ו-100px למטה */
div {
  transform: translate(50px, 100px); 
}

/* מטה את האלמנט ב-20 מעלות על ציר X וב-10 מעלות על ציר Y */
div {
  transform: skew(20deg, 10deg); 
}

אתגר

קל

בהינתן גלריה עם 4 תמונות, שלכל אחת מהן מחלקה (img1, img2 וכן הלאה), יש להחיל את השינויים הבאים בעת ריחוף מעל התמונה:

תמונה 1 (.img1): השתמשו ב־scale() כדי להגדיל את התמונה פי 1.2 בעת ריחוף מעליה.
תמונה 2 (.img2): השתמשו ב־rotate() כדי לסובב את התמונה ב־45 מעלות בעת ריחוף מעליה.
תמונה 3 (.img3): השתמשו ב־translate() כדי להזיז את התמונה -5px ימינה ו־-3px למטה בעת ריחוף מעליה.
תמונה 4 (.img4): השתמשו ב־skew() כדי להטות את התמונה ב־20 מעלות בציר X וב־10 מעלות בציר Y בעת ריחוף מעליה.

נסו בעצמכם

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