التحويلات

جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 23 من 43.

يتيح لك CSS تغيير مظهر transform من خلال تغيير مقياس عنصر أو تدويره أو تحريكه (translate) أو إمالته. تُطبَّق هذه التغييرات فورًا ما لم تُدمج مع الانتقالات.

scale(): تغيير حجم element (جعله أكبر أو أصغر).
rotate(): تدوير element بمقدار degrees.

translate(): حرّك element إلى اليسار/‏right أو إلى الأعلى/‏down.
skew(): أمل element على امتداد المحور X أو Y ‏axis.

أمثلة:

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

التحدي

سهل

معرض يحتوي على 4 صور، لكل منها class (img1 وimg2 وما إلى ذلك)، طبّق التحويلات التالية عند hover:

Image 1 (.img1): استخدم scale() لجعل الصورة أكبر بمقدار 1.2 مرة عند hover.
Image 2 (.img2): استخدم rotate() لتدوير الصورة بمقدار 45 degrees عند hover.
Image 3 (.img3): استخدم translate() لتحريك الصورة بمقدار -5px إلى right وبمقدار -3px إلى down عند hover.
Image 4 (.img4): استخدم skew() لإمالة الصورة بمقدار 20 degrees على X-axis وبمقدار 10 degrees على Y-axis عند hover.

جرّب بنفسك

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