CSSالتحويلات الثنائية الأبعاد
- مفهوم التحويلات الثنائية الأبعاد
- تدوير العنصر
- تحريك العنصر
- تحجيم العنصر
- إمالة العنصر
- تحديد كل الخصائص الثنائية الأبعاد للعنصر
مفهوم التحويلات الثنائية الأبعاد
توفر لك CSS مجموعة من الدوال التي يمكنك استخدامها لإجراء تحويلات ثنائية الأبعاد ( 2D Transforms ) على العناصر مثل إزاحتها من مكانها الأساسي، تدويرها بدرجة معينة، جذب زواياها باتجاه محدد، أو إعادة تحجيمها.
التحويلات الثنائية الأبعاد هي تعديلات يمكنك إجراءها على العناصر على المحورين X و Y.
التحويلات الثنائية الأبعاد يمكن إجراءها على العناصر بواسطة الخاصية transform و من ثم تمرير إحدى دوال التحويل لها كقيمة.
في هذا الدرس سنتعرف على جميع الدوال التالية:
translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix()
تدوير العنصر
لتدوير العنصر بدرجة محددة يمكنك استخدام الدالة rotate() مع تمرير رقم يمثل درجة الدوران.
في حال وضعت عدد أكبر من صفر فإن الدوران سيكون باتجاه اليمين، و في حال وضعت عدد أصغر من صفر فإن الدوران سيكون باتجاه اليسار.
في المثال التالي قمنا بجعل العنصر مائل بنسبة 20 درجة.
في المثال التالي قمنا بجعل العنصر مائل بنسبة ناقص 20 درجة مما يعني أنه سيدور للجهة المعاكسة.
تحريك العنصر
لإزاحة أو تحريك العنصر من مكانه يمكنك استخدام الدالة translate() مع تمرير عددين لها بوحدة قياس محددة كقيم مثل px، pt، cm. العدد الأول يمثل كم سيبتعد العنصر أفقياً من جهة اليسار، و العدد الثاني يمثل كم سيبتعد العنصر عمودياً من الأعلى.
في حال وضعت عدد أصغر من صفر فإن التحريك سيكون بالإتجاه المعاكس. فمثلاً إذا وضعت ناقص 50 أفقياً فهذا يعني أنك تريد الرجوع عن جهة اليسار بنسبة 50 بكسل.
في المثال التالي قمنا بجعل العنصر يتحرّك باتجاه اليمين بنسبة 40 بكسل و يتحرّك باتجاه الأسفل بنسبة 80 بكسل.
المثال الأول
في المثال التالي قمنا بجعل العنصر يتحرّك باتجاه اليسار بنسبة 10 بكسل و يتحرّك باتجاه الأعلى بنسبة 40 بكسل.
المثال الثاني
تحجيم العنصر
لتكبير أو تصغير العنصر بنسبة محددة يمكنك استخدام إحدى الدوال التالية.
| الدالة | إستخدامها |
|---|---|
| scale() | لتكبير أو تصغير حجم العنصر أفقياً و عمودياً. |
| scaleX() | لتكبير أو تصغير حجم العنصر أفقياً فقط. |
| scaleY() | لتكبير أو تصغير حجم العنصر عمودياً فقط. |
الآن عليك معرفة أن أي دالة تستخدمها منهم يجب إعطاءها رقم يمثل الحجم الجديد من أصل واحد. مما يعني أن الحجم 1 هو الحجم الطبيعي للعنصر.
إذا في حال وضعت الحجم 1 للعنصر لن تلاحظ أي اختلاف لأن هذا الحجم الإفتراضي، أما إذا وضعت 0.5 فهذا يعني أنك تريد تصغير حجمه إلى النصف، و إذا وضعت 1.5 فهذا يعني أنك تريد تكبير حجمه بمقدار النصف و هكذا.
في المثال التالي قمنا بتكبير حجم العنصر أفقياً و عمودياً بنسبة 0.2 عن حجمه الطبيعي.
في المثال التالي قمنا بتصغير حجم العنصر أفقياً و عمودياً بنسبة 0.2 عن حجمه الطبيعي.
في المثال التالي قمنا بتكبير حجم العنصر أفقياً إلى الضعف.
في المثال التالي قمنا بتكبير حجم العنصر عمودياً إلى الضعف.
إمالة العنصر
لإمالة العنصر بدرجة محددة أفقياً أو عمودياً يمكنك استخدام إحدى الدوال التالية.
| الدالة | إستخدامها |
|---|---|
| skew() |
لإمالة العنصر أفقياً، أو أفقياً و عمودياً.
|
| skewX() | لإمالة العنصر أفقياً فقط. |
| skewY() | لإمالة العنصر عمودياً فقط. |
في حال وضعت عدد أصغر من صفر فإن درجة الإمالة ستكون بالإتجاه المعاكس.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه الأعلى بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه الأسفل بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة و للأعلى بمقدار 20 درجات.
في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بنسبة 20 بكسل و للأسفل بنسبة 10 بكسل.
المثال الثامن
تحديد كل الخصائص الثنائية الأبعاد للعنصر
في حال أردت إجراء أكثر من تعديل ثنائي الأبعاد على العنصر، يمكنك استخدام الدالة matrix() و إعطاءها 6 قيم تمثل القيم التي يمكنك إعطاءها للدوال الموضوعة بالترتيب التالي:
في المثال التالي قمنا بجعل حجم العنصر عمودياً يساوي 1 (أي لم نغيره)، مائل عمودياً بنسبة 0 (أي لم نغيّره). مائل نحو اليمين بنسبة 50 و هذا يعني مائل بنسبة 50% أو بزاوية 45 درجة، حجم العنصر أفقياً يساوي 1 (أي لم نغيّره)، بعيد من جهة اليسار بمقدار 40 بكسل، و بعيد من الأعلى بمقدار 80 بكسل.
