המרה

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

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

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

translate(): הזזת האלמנט שמאלה או ימינה, או למעלה או למטה. ערכים חיוביים מזיזים אותו ימינה (X) ולמטה (Y), וערכים שליליים מזיזים אותו שמאלה ולמעלה.
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>