🔄 تحويل مظهر العناصر: إتقان Scale و Skew في CSS

مرحباً بك في درس جديد من دروس CSS! بعد أن تعلمنا في الدروس السابقة كيفية تحريك العناصر باستخدام translate()، حان الوقت لنتعلم طريقتين قويتين أخريتين لتغيير شكل العنصر ذاته: التكبير/التصغير (Scale) والإمالة (Skew). تخيل أنك تريد تكبير زر عند مرور الماوس عليه، أو إنشاء تأثير إمالة مثير للإعجاب لصورة ما. هذا بالضبط ما سنفعله اليوم! 🎯

📐 فهم دالة scale(): التحكم في الحجم

دالة scale() تسمح لك بتغيير حجم العنصر. يمكنك تكبيره ليصبح أكبر من حجمه الأصلي، أو تصغيره ليصبح أصغر. المهم أنها تحافظ على نسب العنصر (أي لا تشوهه).

الصيغة الأساسية:

transform: scale(القيمة);
  • القيمة 1: تعني الحجم الأصلي (100%).
  • القيمة أكبر من 1: تكبير العنصر. مثلاً scale(2) تضاعف حجم العنصر.
  • القيمة بين 0 و 1: تصغير العنصر. مثلاً scale(0.5) تجعل العنصر نصف حجمه الأصلي.
  • القيمة 0: تجعل العنصر غير مرئي (بحجم صفر).

مثال 1: تكبير زر عند المرور

.button {
  padding: 15px 30px;
  background-color: #4CAF50;
  color: white;
  border: none;
  transition: transform 0.3s; /* إضافة انتقال سلس */
}

.button:hover {
  transform: scale(1.2); /* تكبير الزر بنسبة 20% عند المرور */
}

في هذا المثال، عندما يمر المستخدم بالماوس فوق الزر .button، سيكبر بنسبة 20% بشكل سلس بسبب خاصية transition.

مثال 2: تصغير صورة

.thumbnail {
  width: 200px;
  transform: scale(0.8); /* تصغير الصورة لتصبح 80% من حجمها الأصلي */
}

↔️ التحكم في scale() أفقيًا وعموديًا

يمكنك التحكم في التكبير/التصغير على كل محور على حدة باستخدام scaleX() و scaleY()، أو باستخدام نسختين من القيمة في scale().

  • scale(العرض, الارتفاع): القيمة الأولى للعرض (X)، الثانية للارتفاع (Y).
  • scaleX(قيمة): التحكم في العرض فقط.
  • scaleY(قيمة): التحكم في الارتفاع فقط.

مثال 3: تكبير أفقي فقط

.stretched-box {
  background-color: lightblue;
  padding: 20px;
  transform: scaleX(1.5); /* تكبير العنصر أفقيًا بنسبة 50% فقط */
}

هذا سيمدد الصندوق أفقيًا، بينما يبقى ارتفاعه كما هو، مما قد يشوه الشكل إذا كان يحتوي على نص.

📈 فهم دالة skew(): إنشاء تأثير الإمالة

دالة skew() تقوم "بإمالة" أو "إزاحة" العنصر على طول المحور X أو المحور Y. تخيل أنك تمسك بصورة من زاوية وتسحبها لتصبح مائلة. هذا هو تأثير skew.

الصيغة الأساسية:

transform: skew(الزاوية);

تُحدد الزاوية بالدرجات (deg). القيمة الموجبة تميل العنصر في اتجاه، والقيمة السالبة في الاتجاه المعاكس.

مثال 4: إمالة عنصر على المحور X

.skewed-element {
  background-color: coral;
  padding: 25px;
  margin: 30px;
  transform: skewX(20deg); /* إمالة العنصر 20 درجة على المحور الأفقي */
}

سيبدو هذا العنصر كما لو كان مرتكزاً على قاعدة مائلة.

مثال 5: إمالة على المحورين معًا

transform: skew(15deg, 10deg); /* إمالة 15 درجة على X و 10 درجات على Y */

🧩 الجمع بين تحويلات transform

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

مثال 6: تكبير وإمالة معًا

.combined-transform {
  background-color: gold;
  padding: 20px;
  transform: scale(1.1) skewX(-10deg); /* أولاً: تكبير، ثم إمالة */
}

.combined-transform:hover {
  transform: scale(1.3) skewX(-10deg); /* تكبير أكثر عند المرور */
}

🎯 نقطة التحول: transform-origin

بشكل افتراضي، تتم جميع التحويلات (التكبير، الإمالة، الدوران) حول مركز العنصر. لكن ماذا لو أردت أن يتم التكبير من الزاوية العلوية اليسرى؟ هنا يأتي دور transform-origin.

.element {
  transform: scale(1.5);
  transform-origin: top left; /* التكبير سيبدأ من الزاوية العلوية اليسرى */
}

يمكنك استخدام قياسات مثل px أو %، أو كلمات مفتاحية مثل top, bottom, left, right, center.

🛠️ تطبيق عملي: إنشاء بطاقة تفاعلية

لنطبق ما تعلمناه في مثال واقعي بسيط.

<div class="card">
  <img src="landscape.jpg" alt="منظر طبيعي">
  <h3>عنوان البطاقة</h3>
  <p>وصف قصير للبطاقة يظهر تأثير التحويل.</p>
</div>

.card {
  width: 250px;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  transition: transform 0.4s ease; /* إضافة انتقال */
}

.card img {
  width: 100%;
  transform: scale(0.95);
  transition: transform 0.4s ease;
}

.card:hover {
  transform: skewY(-2deg); /* إمالة خفيفة للبطاقة كلها */
}

.card:hover img {
  transform: scale(1); /* إرجاع الصورة لحجمها الكامل عند المرور */
}

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

لقد أصبح بإمكانك الآن التحكم في حجم وعرض العناصر ببراعة! في الدرس القادم، سنكمل رحلتنا مع عائلة transform ونتعلم الدوران (Rotate). سنتعلم كيف ندير العناصر في دائرة كاملة، وننشئ مؤشرات تحميل (loaders) دوارة بسيطة، ونتعمق أكثر في transform-origin للتحكم في نقطة الدوران. استعد لإضافة لمسة ديناميكية جديدة لتصميماتك!