شرح خاصية Transform في Css لعمل تحولات ثنائية وثلاثية الأبعاد

تستخدم خاصية transform في Css لعمل تحولات في عناصر html بشكل ثنائي أو ثلاثي الأبعاد ، كتأثير الدوران أو الإمتداد أو الإزاحة أو الإنحناء ، وعموما أي تأثير يؤثر في العنصر من حيث الشكل ، وتأخذ الخاصية كقيمة إحدى الدوال التي تشتغل على مثل هذه التأثيرات ، وتنقسم إلى قسمين : ثأثيرات ثنائية الأبعاد و أخرى ثلاثية الأبعاد.

يبدأ دعم خاصية transform من إصدارات المتصفحات التالية :

لتشغيل هذه التأثيرات وعمل التحولات نكتب أولا الخاصية transform العادية ، وكغيرها من خصائص css3 نكتبها بالشكل العادي وكذلك مع البادئات -webkit- و -moz- و -o- و -ms- لضمان اشتغالها على أكبر عدد من إصدارات المتصفحات ، ثم نكتب لها قيمة إحدى الدوال التي سأذكرها تباعا والتي تنقسم إلى إلى قسمين ، التي تدعم تحولات ثنائية الأبعاد 2D والأخرى التي تشتغل في البعد الثالث 3D ، ولإلغاء أي transform موجود بالفعل فقط نستخدم القيمة none .

دوال لعمل transform ثنائي الأبعاد 2D 

1- الدالة ()rotate : لعمل تأثير الدوران حول المركز وتأخذ قيمة واحدة ب deg وتمثل مقدار زاوية الدوران في اتجاه الصفحة ، وإذا أخذت قيمة سالبة يدور العنصر عكس اتجاه الصفحة. القيمة الإفتراضية هي 0 وتعني إلغاء الدوران.

2- الدالة ()scale : وتأخذ قيمتين x و تمثل العرض width و y و تمثل الإرتفاع height بينهما فاصلة أجنبية ، القيمة الإفتراضية هي 1 لكل منهما وتعني بقاء أبعاد العنصر كما هما ، أي قيمة أكبر من 1 إذا وضعت لكليهما ستزيد من أبعاد العنصر ، القيمة 2 مثلا ستضاعف أبعاد العنصر ، وأي قيمة أقل من 1 تنقص من الأبعاد ، الدالة تقبل قيمة واحدة وستطبق على العرض والإرتفاع معا.

3- الدالة ()scaleX : اختصار للدالة scale وتأخذ قيمة واحدة تطبق أفقيا.

4- الدالة ()scaleY : اختصار للدالة scale وتأخذ قيمة واحدة تطبق عموديا.

5- الدالة ()translate : وتأخذ قيمتين x و y ب px و % و تقبل وحدات القياس المشابهة ك em ، وتقوم بإزاحة العنصر من مكانه ، القيمة الإفتراضية لكليهما هي 0 وتبقي العنصر في مكانه ، أي قيمة إيجابية ل x تزيح العنصر أفقيا في اتجاه الصفحة ، وأي قيمة ل y تزيح العنصر من الأعلى إلى الأسفل ، وتشتغل القيم السلبية عكس الإتجاه ، إذا وضعت قيمة واحدة فقط للدالة ستطبق أفقيا فقط.

6- الدالة ()translateX : اختصار للدالة translate وتأخذ قيمة واحدة تطبق أفقيا.

7- الدالة ()translateY : اختصار للدالة translate وتأخذ قيمة واحدة تطبق عموديا.

8- الدالة ()skew : وتأخذ قيمتين x و y ب deg ، وتقوم بعمل انحناء في زوايا العنصر ، أي قيمة إيجابية ل x تطبق انحناء في الزوايا بشكل أفقي في اتجاه الصفحة ، وأي قيمة إيجابية ل y تطبق انحناء في الزوايا بشكل عمودي ، وتشتغل القيم السبية عكس الإتجاه ، إذا وضعت قيمة واحدة للدالة ستطبق أفقيا فقط ، القيمة الإفتراضية لكلا المعاملين هي 0 وتعني بقاء العنصر على حاله.

9- الدالة ()skewX : اختصار للدالة skew وتأخذ قيمة واحدة تطبق أفقيا.

10- الدالة ()skewY : اختصار للدالة skew وتأخذ قيمة واحدة تطبق عموديا.

دوال لعمل transform ثلاثي الأبعاد 3D 

1- الدالة ()rotateX : لعمل تأثير الدوران حول المحور الأفقي من الأعلى إلى الأسفل وتقبل قيمة واحدة ب deg وتمثل زاوية الدوران والقيمة السلبية تجعل الدوران عكس الإتجاه.

2- الدالة ()rotateY : لعمل تأثير الدوران حول المحور العمودي في اتجاه الصفحة وتقبل قيمة واحدة ب deg وتمثل زاوية الدوران والقيمة السلبية تجعل الدوران عكس اتجاه الصفحة.

3- الدالة ()rotateZ : نفس تأثير rotate العادية 2D .

4- الدالة ()scale3d : تقبل 3 قيم الأولى ل x والثانية ل y (التي تعلمناها في scale العادية) بالإضافة إلى قيمة ثالثة z تقرب العنصر من العين في اتجاه المنظور أي البعد الثالث إذا وضعت لها قيمة أكبر من 1 وأي قيمة أصغر من 1 تبعد العنصر والقيمة 1 الإفتراضية تبقيه كما هو.

5- الدالة ()scaleZ : اختصار للدالة scale3d وتأخذ قيمة واحدة z تطبق في اتجاه المنظور أي البعد الثالث.

6- الدالة ()translate3d : تقبل 3 قيم الأولى ل x والثانية ل y (التي تعلمناها في translate العادية) بالإضافة إلى قيمة ثالثة z تقوم بإزاحة العنصر في اتجاه المنظور أي البعد الثالث ، كما x و y تأخذ القيمة ب px أو وحدات القياس المشابهة والقيمة السلبية تشتغل عكس الإتجاه.

7- الدالة ()translateZ : اختصار للدالة translate3d وتقبل قيمة واحدة ل z تطبق في اتجاه المنظور أي البعد الثالث.

خصائص مهمة تعمل مع transform 

1- الخاصية perspective : ضرورية لتشغيل البعد الثالث z لتشتغل خواص 3D وتظهر بشكل سليم ، يأخذ القيمة ب px ويقوم بعمل منظور افتراضي بين الشاشة والعين تظهر فيه خواص 3D بشكل سليم، وتوضع هذه الخاصية للعنصر الأب للعناصر المطبق عليها تأثير 3D.

2- الخاصية transform-origin : تستخدم لتحديد مركز التأثير ، القيمة الإفتراضية للخاصية هي 50% 50% أو center center وتجعل مركز التأثير على طبيعته في المركز المنتصف ، وتقبل قيم أخرى ك top و bottom و left و right أو قيم ب % هذا في حال أردنا تغيير مكان مركز التأثير.

3- الخاصية transform-style : تستخدم لتغيير شكل تأثيرات 3d ، القيمة الإفتراضية هي flat ولا تظهر كل تأثيرات 3d والقيمة الأخرى هي preserve-3d وتظهر كل الخواص المخفية ثلاثية الأبعاد التي لم تظهر حتى مع وجود perspective لكون هذه الأخيرة توضع للأب المباشر وقد تكون موجودة في الأب غير المباشر فلا تظهر معنا كل خواص 3d فنضطر لاستخدام preserve-3d.

4- الخاصية backface-visibility : عندما نعمل rotate ثلاثي الأبعاد لعنصر ما يظهر الجانب الخلفي لهذا العنصر لأن القيمة الإفتراضية لهذه الخاصية هي visible ، في حالة أردنا عدم ظهور الجانب الخلفي لأي عنصر أثناء الدوران نعطيها القيمة hidden.