تحويلات 2D CSS3

تسمح وظائف تحويل CSS3 بتحويل العناصر في الفضاء الثنائي.

تحويل العنصر الثنائي

استخدام وظائف تحويل 2D في CSS3، يمكنك تنفيذ عمليات تحويل أساسية على العناصر في الفضاء الثنائي، مثل التحرك، الدوران، التكبير والتقلص.

العنصر بعد التحويل لا يؤثر على العناصر المحيطة به، ولكن يمكن ت覆盖ه مثل العناصر الموجودة في تحديد الموقع بشكل مطلق. ولكن، العنصر بعد التحويل سيأخذ مساحة في التخطيط في موقعه الافتراضي (غير التحويل).

استخدام تحويلات CSS ووظائف التحويل

يستخدم خاصية transform في CSS3 ميزات التحويل لمعالجة نظام الإحداثيات الذي يستخدم العنصر، لتحقيق تأثير تحويل.

يُوضح الجزء التالي هذه الدوال التحويلية:

وظيفة تحويل()

تحويل العنصر من موقع الحالي إلى موقع جديد على محور x وy. يمكن كتابة هذا على شكل تحويل(tx, ty). إذا لم يتم تحديد ty، فيُفترض أنها تساوي صفر.

img {
　　　　-webkit-تحويل: تحويل(200px, 50px); /* Chrome, Safari, Opera */
　　　　　　　-moz-تحويل: تحويل(200px, 50px); /* Firefox */
　　　　　　　　-ms-تحويل: تحويل(200px, 50px); /* IE 9 */
　　　　　　　　　　　　تحويل: تحويل(200px, 50px);　　　　　　
}

تحويل(200px, 50px) هذه الوظيفة تتحرك الصورة بشكل أفقي نحو اتجاه x بناءً على 200 بكسل، وتتحرك بشكل عمودي نحو اتجاه y بناءً على 50 بكسل.

وظيفة rotate()

تُستخدم وظيفة rotate() لتحويل العنصر حول نقطة الأصل (محددة بواسطة خاصية transform-origin) بزاوية معينة. يمكن كتابتها على شكل rotate(a).

img {
　　　　-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: rotate(30deg); /* Firefox */
　　　　　　　　-ms-transform: rotate(30deg); /* IE 9 */
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

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

وظيفة scale()

تُستخدم وظيفة scale() لزيادة أو تقليل حجم العنصر. يمكن كتابتها على شكل scale(sx, sy). إذا لم يتم تحديد sy، فيُفترض أنها تساوي sx.

img {
　　　　-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: scale(1.5); /* Firefox */
　　　　　　　　-ms-transform: scale(1.5); /* IE 9 */
　　　　　　　　　　　　transform: scale(1.5); /* متصفحات الحديثة */　　　　
}

تُستخدم وظيفة scale(1.5) لتقليل أو زيادة حجم الصورة بناءً على الحجم الأصلي بضعف الحجم. لا يؤثر على العنصر وظيفة scale(1) أو scale(1،1).

وظيفة skew()

تُستخدم وظيفة skew() لجعل العنصر يتدرج على المحور X والمحور Y بزاوية معينة. يمكن كتابتها على شكل skew(ax, ay). إذا لم يتم تحديد ay، فيُفترض أنها تساوي صفر.

img {
　　　　-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: skew(-40deg, 15deg); /* Firefox */
　　　　　　　　-ms-transform: skew(-40deg, 15deg); /* IE 9 */
　　　　　　　　　　　　transform: skew(-40deg, 15deg); /* متصفحات الحديثة */　　　　
}

الوظيفة skew(-40deg, 15deg) تجعل العنصر يتدرج على المحور الأفقي ب -40 درجة، وتجعله يتدرج عموديًا على المحور العمودي ب 15 درجة.

وظيفة matrix()

وظيفة matrix() يمكن أن تنفذ جميع التحويلات 2D في وقت واحد، مثل التنقل، الدوران، التوسع والانحناء. إنه يستخدمالنظامشكل ستة معلمات، يمكن كتابته على شكل matrix(a, b, c, d, e, f). في القسم التالي سيتم عرض كيفية استخدام matrix() لتمثيل كل وظيفة تحويل 2D.

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); — حيث، tx و ty هي القيم المستوى الأفقي والعمودي للتنقل.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); — حيث، a هي الدرجة. يمكنك تبديل قيم sin(a) و -sin(a) لإدارة الدوران. يمكنك إجراء دوران يصل إلى 360 درجة.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0); — حيث sx و sy هي نسب التوسع المستوى والعمودي.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0); — حيث ax و ay هي القيم المستوى الأفقي والعمودي بالدرجات.

هذا مثال على استخدام وظيفة matrix() لتحويلات 2D.

img {
　　　　-webkit-transform: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة); /* Firefox */
　　　　　　　　-ms-transform: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة); /* IE 9 */
　　　　　　　　　　　　تحويل: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة);　　
}

لكن، عند تنفيذ عدة تحويلات في وقت واحد، سيكون من المريح استخدام وظيفة تحويل واحدة وترتيبها في ترتيب، مثل ما يلي:

img {
　　　　-webkit-transform: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: تنقل(200px, 50px) تدوير(180درجة) تناسب(1.5) انحناء(0, 30درجة); /* Firefox */
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

وظائف تحويلات 2D

يُلخص الجدول التالي جميع وظائف التحويلات 2D بشكل مختصر.