🎯 ما هي خاصية transform-origin في CSS؟ دليلك للتحكم الكامل في نقطة التحول!

في دروس CSS السابقة، تعلمنا كيفية تحريك العناصر وتدويرها وتكبيرها باستخدام خاصية transform الرائعة. لكن هل لاحظت أن العنصر يدور دائماً حول نقطة مركزه الافتراضية؟ ماذا لو أردنا أن يدور من طرفه، أو من زاويته؟ هذا بالضبط هو دور خاصية transform-origin! فهي تسمح لك بتغيير نقطة الأصل أو المحور الذي يتم حوله تطبيق أي تحويل transform، مثل rotate() أو scale(). هيا نتعمق معاً! 🚀

🧭 لماذا نحتاج إلى تغيير نقطة الأصل (transform-origin)؟

تخيل أنك تمسك بورقة مربعة من منتصفها بيدك وتديرها. ستدور الورقة حول نقطة المنتصف. الآن، تخيل أنك تمسكها من طرفها العلوي وتديرها! ستكون الحركة مختلفة تماماً، أليس كذلك؟ 🔄

في CSS، العنصر الافتراضي يدور أو يتغير حجمه حول مركزه (50% 50%). خاصية transform-origin هي بمثابة يدك التي تتحكم في النقطة التي تمسك منها العنصر لتطبيق التحويل عليه.

بدون transform-origin: كل التحويلات تتم حول المركز. مع transform-origin: يمكنك جعل التحويل يتم حول أي نقطة تختارها، مما يفتح عالمًا من الإمكانيات الإبداعية!

📍 قيم خاصية transform-origin وكيفية استخدامها

يمكن تعيين قيمة transform-origin بعدة طرق. الصيغة العامة هي:

transform-origin: x-axis y-axis z-axis;

حيث z-axis تستخدم فقط في التحويلات ثلاثية الأبعاد (3D)، وسنتحدث عنها في درس متقدم لاحقاً. دعنا الآن نركز على x-axis و y-axis.

1. باستخدام الكلمات المفتاحية (Keywords)

هذه أبسط طريقة، وتستخدم كلمات محددة لتحديد موقع النقطة.

.element {
  transform: rotate(45deg);
  transform-origin: top left; /* النقطة ستكون الزاوية العلوية اليسرى */
}

القيم المتاحة للمحورين X و Y:

  • left, center, right (للمحور الأفقي X).
  • top, center, bottom (للمحور الرأسي Y).

مثال عملي يوضح الفرق:

<!DOCTYPE html>
<html lang="ar">
<head>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            margin: 40px auto;
            transition: transform 1s; /* تأثير سلس للتحويل */
        }
        .center:hover {
            transform: rotate(45deg);
            /* النقطة الافتراضية: center center */
        }
        .top-left:hover {
            transform: rotate(45deg);
            transform-origin: top left; /* الدوران حول الزاوية العليا اليسرى */
        }
    </style>
</head>
<body>
    <p>مرر مؤشر الفأرة فوق المربعات:</p>
    <div class="box center">الدوران حول المركز (الافتراضي)</div>
    <div class="box top-left">الدوران حول الزاوية العلوية اليسرى</div>
</body>
</html>

في هذا المثال، سترى أن المربع الأول يدور حول مركز نفسه، بينما المربع الثاني يدور حول زاويته العليا اليسرى، وكأنه مثبت من تلك النقطة! 🤯

2. باستخدام النسب المئوية (Percentages %)

تعطيك هذه الطريقة تحكماً دقيقاً جداً. القيمة 0% 0% تعني أعلى يسار العنصر، و 100% 100% تعني أسفل يمين العنصر، و 50% 50% هي المركز (وهي القيمة الافتراضية).

.element {
  transform: scale(1.5); /* تكبير العنصر */
  transform-origin: 0% 100%; /* نقطة الأصل ستكون أسفل يسار العنصر */
}

مثال: تكبير عنصر من أسفله

.box {
  transform: scale(1.3);
  transform-origin: bottom; /* تعادل 50% 100% */
  /* سيتم تكبير العنصر، ولكن نقطة الارتباط والثبات ستكون من الحافة السفلية */
}

3. باستخدام الوحدات المطلقة (مثل px)

يمكنك تحديد موقع النقطة بدقة باستخدام البيكسلات، حيث 0px 0px هي أعلى يسار العنصر.

.icon {
  transform: rotate(90deg);
  transform-origin: 20px 50px; /* تدوير العنصر حول النقطة التي تبعد 20px من اليسار و 50px من الأعلى */
}

هذه الطريقة مفيدة عندما تريد ربط نقطة التحول بموقع محدد بدقة داخل العنصر، بغض النظر عن حجمه.

🎨 أمثلة تطبيقية واقعية على transform-origin

لنرى كيف يمكن لهذه الخاصية البسيطة أن تغير من سلوك وتأثير العناصر بشكل كبير.

مثال 1: إنشاء باب يفتح 🚪

بدون transform-origin، إذا قمت بتدوير <div> يمثل باباً، سيدور حول منتصفه وسيبدو غريباً. لكن إذا جعلت نقطة الأصل على الحافة اليسرى، سيدور كما يدور الباب الحقيقي على مفصلاته!

.door {
  width: 80px;
  height: 180px;
  background-color: brown;
  /* جعل نقطة الدوران على الحافة اليسرى */
  transform-origin: left center;
  transition: transform 0.5s;
}
.door:hover {
  transform: rotateY(30deg); /* تدوير حول المحور Y (للداخل والخارج) */
}

مثال 2: عقرب ساعة يدور ⏰

عقارب الساعة تدور حول مركز الساعة، وليس حول مركز العقرب نفسه. transform-origin هي الحل المثالي هنا.

.hour-hand {
  width: 6px;
  height: 60px;
  background-color: black;
  /* وضع العقرب في منتصف الساعة وجعل نقطة دورانه من أسفله */
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  animation: rotate-hour 12s infinite linear;
}

مثال 3: تأثير اهتزاز زر (Wiggle) 🎵

لإنشاء تأثير اهتزاز لطيف لزر عند المرور عليه، يمكننا استخدام rotate() مع transform-origin لجعل الاهتزاز من منتصف العنصر.

.button {
  padding: 15px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transform-origin: center center; /* واضح هنا للتوضيح */
}
.button:hover {
  animation: wiggle 0.3s ease-in-out infinite alternate;
}
@keyframes wiggle {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

💡 الخلاصة والأفضليات

  • الهدف: transform-origin تتحكم في نقطة البداية لأي تحويل transform.
  • القيمة الافتراضية: 50% 50% (مركز العنصر).
  • الطريقة المفضلة: استخدام الكلمات المفتاحية مثل top, left, bottom, right, center لأنها الأكثر وضوحاً وقابلية للقراءة في معظم الحالات.
  • تذكر: لا تؤثر transform-origin على تخطيط الصفحة (Layout)، فهي تؤثر فقط على كيفية عرض التحويل البصري.