التحويلات

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

تتيح لك خاصية transform في CSS تغيير مظهر العنصر من خلال تغيير حجمه، أو تدويره، أو تحريكه (إزاحته)، أو إمالته. يتم تطبيق هذه التغييرات فوراً ما لم يتم دمجها مع الانتقالات (transitions).

scale() – تغيير حجم العنصر (جعله أكبر أو أصغر).
rotate() – تدوير العنصر بالدرجات.

translate() – تحريك العنصر لليسار/اليمين أو للأعلى/للأسفل.
skew() – إمالة العنصر على طول المحور X أو Y.

أمثلة:

/* يجعل الصورة أكبر بنسبة 20% */
img {
  transform: scale(1.2); 
}

/* يقوم بتدوير الصندوق 45 درجة في اتجاه عقارب الساعة */
.box {
  transform: rotate(45deg); 
}

/* يحرك العنصر بمقدار 50 بكسل لليمين و100 بكسل للأسفل */
div {
  transform: translate(50px, 100px); 
}

/* يقوم بإمالة العنصر بمقدار 20 درجة على المحور X و10 درجات على المحور Y */
div {
  transform: skew(20deg, 10deg); 
}

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

بناءً على معرض صور يحتوي على 4 صور، لكل منها فئة (img1، img2، إلخ)، قم بتطبيق التحويلات التالية عند تمرير الماوس (on hover):

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

ورقة مرجعية

تسمح لك خاصية transform في CSS بتغيير مظهر العنصر من خلال تغيير حجمه (scaling)، أو تدويره (rotating)، أو تحريكه (translating)، أو إمالته (skewing).

scale() – تغيير حجم العنصر (جعله أكبر أو أصغر)
rotate() – تدوير العنصر بالدرجات
translate() – تحريك العنصر لليسار/اليمين أو للأعلى/الأسفل
skew() – إمالة العنصر على طول المحور X أو Y

/* يجعل الصورة أكبر بنسبة 20% */
img {
  transform: scale(1.2); 
}

/* يقوم بتدوير الصندوق 45 درجة في اتجاه عقارب الساعة */
.box {
  transform: rotate(45deg); 
}

/* يحرك العنصر 50 بكسل لليمين و 100 بكسل للأسفل */
div {
  transform: translate(50px, 100px); 
}

/* يميل العنصر 20 درجة على المحور X و 10 درجات على المحور Y */
div {
  transform: skew(20deg, 10deg); 
}

جرّب بنفسك

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

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.