✨ تحريك ودوران العناصر في CSS: دليلك العملي لـ Translate و Rotate

مرحباً بك في عالم التحريك والدوران في CSS! 🎨 اليوم سنتعلم كيفية إضافة لمسات ديناميكية لعناصر صفحتك باستخدام خاصية transform، وتحديداً وظيفتي translate() و rotate(). ما يميز هذه الخصائص أنها تتحكم بمظهر العنصر المرئي دون التأثير على التخطيط العام للصفحة، مما يجعلها أداة قوية وسهلة الاستخدام.

🔧 ما هي خاصية transform في CSS؟

خاصية transform هي أداة سحرية في CSS تسمح لك بتغيير شكل، حجم، موقع، أو اتجاه العنصر. تخيل أنك تمسك بصورة ورقية ويمكنك تحريكها على الطاولة (translate) أو تدويرها (rotate) – هذا بالضبط ما تفعله transform لعناصر صفحة الويب الخاصة بك! السحر الحقيقي هو أن العنصر الأصلي يبقى في مكانه في تدفق المستند، بينما تظهر نسخة منه فقط متحركة أو مدورة.

.element {
  transform: function_needs_to_be_added();
}

🚀 تحريك العناصر مع translate()

وظيفة translate() تتحكم في موضع العنصر عن طريق نقله أفقيًا (على المحور X) و/أو رأسيًا (على المحور Y). فكر فيها كأمر "انقل هذا العنصر من مكانه الحالي إلى..."

كيفية استخدام translate()

يمكن استخدام translate() بعدة طرق:

  1. التحريك الأفقي والرأسي معاً: translate(x, y)
    • x: المسافة الأفقية (موجب لليمين، سالب لليسار).
    • y: المسافة الرأسية (موجب للأسفل، سالب للأعلى).
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  /* move the box 50px to the right and 20px to the bottom */
  transform: translate(50px, 20px);
}
  1. التحريك في اتجاه واحد فقط:
    • translateX(value): للتحريك أفقيًا فقط.
    • translateY(value): للتحريك رأسيًا فقط.
.image {
  /* move the image 30px to the left */
  transform: translateX(-30px);
}

.title {
  /* move the title 15px to the top */
  transform: translateY(-15px);
}

💡 مثال عملي: تخيل أنك تريد إنشاء تأثير طفيف عند تحويل مؤشر الفأرة (hover) على زر.

.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  transition: transform 0.3s ease; /* لإضافة حركة سلسة */
}

.button:hover {
  /* عند المرور على الزر، ارفعه قليلاً للأعلى */
  transform: translateY(-5px);
}

🔄 تدوير العناصر مع rotate()

وظيفة rotate() تقوم بتدوير العنصر حول نقطة مركزه (افتراضياً). القيمة التي نعطيها لها هي الزاوية بالدرجات (deg).

  • rotate(45deg): يدور العنصر 45 درجة باتجاه عقارب الساعة.
  • rotate(-90deg): يدور العنصر 90 درجة عكس عقارب الساعة.
  • rotate(180deg): يدور العنصر نصف دورة (يصبح مقلوباً رأساً على عقب).
.arrow {
  font-size: 2rem;
  /* تدوير السهم 90 درجة لليمين */
  transform: rotate(90deg);
}

.icon {
  width: 50px;
  /* تدوير الأيقونة 45 درجة عكس عقارب الساعة */
  transform: rotate(-45deg);
}

💡 مثال عملي: إنشاء أيقونة سهم يتغير اتجاهها عند النقر لإظهار/إخفاء محتوى.

.arrow-icon {
  display: inline-block;
  transition: transform 0.4s ease;
}

/* عندما يكون المحتوى مفتوحاً، ندير السهم للأسفل */
.content-open .arrow-icon {
  transform: rotate(90deg);
}

🎭 الجمع بين أكثر من تحويل (Transform)

من القوى العظيمة لخاصية transform أنه يمكنك الجمع بين أكثر من وظيفة في سطر واحد! فقط افصل بينهم بمسافة.

.special-element {
  /* حرك العنصر ثم دورة */
  transform: translate(20px, 10px) rotate(15deg);
}

ملاحظة مهمة: الترتيب يؤثر! translate() ثم rotate() تختلف في النتيجة عن rotate() ثم translate().

🧪 لنطبق معاً: مثال مصغر

لننشئ معاً بطاقة (card) بسيطة تتحرك ويدور داخلها أيقونة عند المرور عليها بالمؤشر.

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
  .card {
    width: 200px;
    padding: 20px;
    background: #f0f0f0;
    text-align: center;
    border-radius: 10px;
    margin: 50px auto;
    transition: transform 0.5s;
  }
  .card:hover {
    /* ارفع البطاقة للأعلى عند المرور */
    transform: translateY(-15px);
  }
  .card-icon {
    font-size: 40px;
    margin-bottom: 10px;
    display: inline-block;
    transition: transform 0.8s;
  }
  .card:hover .card-icon {
    /* عند المرور على البطاقة، دور الأيقونة */
    transform: rotate(360deg);
  }
</style>
</head>
<body>
  <div class="card">
    <div class="card-icon">⭐</div>
    <h3>بطاقتي التفاعلية</h3>
    <p>مرر مؤشر الفأرة فوقي!</p>
  </div>
</body>
</html>

🎯 الخلاصة

لقد تعلمت اليوم أداتين أساسيتين من أدوات التحويل البصرية في CSS:

  • translate(): لتحريك العنصر من مكانه الأصلي.
  • rotate(): لدوران العنصر حول نقطة مركزه.

تذكر أن هذه الخصائص لا تغير التخطيط الأصلي للصفحة، مما يجعلها مثالية للإضافة رسوميات متحركة وتأثيرات تفاعلية بسلاسة. جرب تغيير القيم وشاهد النتائج بنفسك! 🚀

ماذا سنتعلم في الدرس القادم؟

الآن وقد أصبح بإمكانك تحريك ودوران العناصر، حان الوقت لنتعلم كيفية تغيير حجمها! في الدرس القادم، سنتعمق في وظيفتي scale() و skew() التابعتين لخاصية transform. سنرى كيف يمكننا تكبير أو تصغير العناصر، وإمالتها لإنشاء منظور مثير. استعد لإضافة المزيد من الحيوية لتصميماتك!