التحويلات

جزء من قسم إتقان 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>