الخاصية transform في لغة الأنماط الإنسيابية cssc_css
تستخدم الخاصية transform في لغة الأنماط الإنسيابية css للتحكم بموقع العنصر و حجمه و شكله في مجال تنائي أو تلاثي الأبعاد
في هدا المقال سنستعرض أهم الإمكانيات اللتي يمكن الحصول عليها من خلال هده الخاصية
تركيب الخاصية transform يختلف قليلا عن تركيب الخصائص الكلاسيكية . إد لا يمكن تمرير قيمة مجردة للخاصية إلا بإستخدام مجموعة من الدوال اللتي تتعامل الخاصية معها بشكل مباشر
مثال rotate
تستخدم الدالة rotate لإستدارة العنصر حسب زاوية محددة و يتم تمرير الدالة rotate مع قيمتها إلى الخاصية transform
transform: rotate(20deg);
النتيجة
 |
تمت إستدارة العنصر بزاوية 20 درجة
مركز الدوران الإفتراضي هو أعلى اليسار و يمكن التحكم به من خلال الخاصية transform-origin
transform-origin:CENTER;
النتيجة
يمكن إدراج قيمة سالبة داخل الدالة rotate للحصول على إستدارة عكسية ( عكس إتجاه عقارب الساعة
transform: rotate(-20deg);
يمكن إدراج أي قيمة سالبة أو موجبة حتى لو كانت أعلى من 360
تتفرع من الدالة rotate دالتين فرعيتين هما rotatex و rotatey و هما على التوالي للإستدارة الأفقية و الإستدارة العمودية
الإستدارة الأفقية rotatex
الإستدارة العمودية rotatey
دالة الإزاحة translate
تقوم هده الدالة بإزاحة العنصر في مجال تنائي الأبعاد ( الطول و العرض )
transform: translate(30px,20px);
النتيجة
القيم السالبة تمكننا دائما من عكس الإتجاه
دالة التكبير scale
تتحكم الدالة scale في حجم العنصر
القيمة 1 تبقي على العنصر في حجمه الأصلي و أي زيادة أو نقصان تمثل نسبة التكبير / التصغير
مثال
transform: scale(0.75);
سيتم تصغير العنصر إلى ثلاثة أرباع حجمه الأصلي
النتيجة
مثال آخر
مثال
transform: scaley(0.8) scalex(1.2);
النتيجة
دالة الإنحراف skew
تقوم هده الدالة حرف العنصر ( أفقيا أو عموديا ) و تأخد بشكل مبدئي قيمتين
أمثلة
// 1
transform: skew(-20deg,0);
// 2
transform: skew(0,15deg);
// 3
transform: skew(-20deg,5deg);
النتائج
1 الإنحراف الأفقي
2 الإنحراف العمودي
3 الإنحراف العمودي و الأفقي ( مزيج )
يمكن إستخدام إحدا الدالتين الفرعيتين skewx أو skewy للتحكم بالإنحراف الأفقي أو العمودي على حدا
و الأنميشن التالي يبين المثال بشكل أوضح
الدالة الجامعة matrix
جميع الدوال السابقة يمكن إختزالها في دالة matrix و تكتب بالصيغة التالية
transform : matrix( 1, 0, 0, 1, 0, 0);
بحيث أن المدخلات في الكود السابق هي كالتالي بالترتيب
scalx
skewx
skewy
scaley
translatex
translatey
يمكن تعويض دالة rotate بالمزج بين skewy و skewx
مثال
transform: matrix(0.94,0.34,-0.34,0.94,0,0);
النتيجة
يتطلب إستخدام دالة matrix إجراء عمليات حسابة معقدة من أجل الوصول للقيمة المطلوبة
يمكنك الإستعانة بهده الأداة لحساب قيمة matrix
أو
إتهى الدرس