CSSالتحويلات الثنائية الأبعاد

مفهوم التحويلات الثنائية الأبعاد

توفر لك CSS مجموعة من الدوال التي يمكنك استخدامها لإجراء تحويلات ثنائية الأبعاد ( 2D Transforms ) على العناصر مثل إزاحتها من مكانها الأساسي، تدويرها بدرجة معينة، جذب زواياها باتجاه محدد، أو إعادة تحجيمها.

التحويلات الثنائية الأبعاد يمكن إجراءها على العناصر بواسطة الخاصية transform و من ثم تمرير إحدى دوال التحويل لها كقيمة.
في هذا الدرس ستتعرف على جميع الدوال التالية:

translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix()

تدوير العنصر

لتدوير العنصر بدرجة محددة يمكنك استخدام الدالة rotate() مع تمرير رقم يمثل درجة الدوران.

في المثال التالي قمنا بجعل العنصر مائل بنسبة 20 درجة.

div {
    transform: rotate(20deg);
}

في المثال التالي قمنا بجعل العنصر مائل بنسبة ناقص 20 درجة مما يعني أنه سيدور للجهة المعاكسة.

div {
    transform: rotate(-20deg);
}

تحريك العنصر

لإزاحة أو تحريك العنصر من مكانه يمكنك استخدام الدالة translate() مع تمرير عددين لها بوحدة قياس محددة كقيم مثل px، pt، cm. العدد الأول يمثل كم سيبتعد العنصر أفقياً من جهة اليسار، و العدد الثاني يمثل كم سيبتعد العنصر عمودياً من الأعلى.

في المثال التالي قمنا بجعل العنصر يتحرّك باتجاه اليمين بنسبة 40 بكسل و يتحرّك باتجاه الأسفل بنسبة 80 بكسل.

div {
    transform: translate(40px, 80px);
}

في المثال التالي قمنا بجعل العنصر يتحرّك باتجاه اليسار بنسبة 10 بكسل و يتحرّك باتجاه الأعلى بنسبة 40 بكسل.

div {
    transform: translate(-10px, -40px);
}

تحجيم العنصر

لتكبير أو تصغير العنصر بنسبة محددة يمكنك استخدام إحدى الدوال التالية.

الآن عليك معرفة أن أي دالة تستخدمها منهم يجب إعطاءها رقم يمثل الحجم الجديد من أصل واحد، مما يعني أن الحجم 1 هو الحجم الطبيعي للعنصر.

إذا في حال وضعت الحجم 1 للعنصر لن تلاحظ أي اختلاف لأن هذا الحجم الإفتراضي، أما إذا وضعت 0.5 فهذا يعني أنك تريد تصغير حجمه إلى النصف، و إذا وضعت 1.5 فهذا يعني أنك تريد تكبير حجمه بمقدار النصف و هكذا.

في المثال التالي قمنا بتكبير حجم العنصر أفقياً و عمودياً بنسبة 0.2 عن حجمه الطبيعي.

div {
    transform: scale(1.2);
}

في المثال التالي قمنا بتصغير حجم العنصر أفقياً و عمودياً بنسبة 0.2 عن حجمه الطبيعي.

div {
    transform: scale(0.8);
}

في المثال التالي قمنا بتكبير حجم العنصر أفقياً إلى الضعف.

div {
    transform: scaleX(2);
}

في المثال التالي قمنا بتكبير حجم العنصر عمودياً إلى الضعف.

div {
    transform: scaleY(2);
}

إمالة العنصر

لإمالة العنصر بدرجة محددة أفقياً أو عمودياً يمكنك استخدام إحدى الدوال التالية.

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بمقدار 20 درجة.

div {
    transform: skewX(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة.

div {
    transform: skewX(-20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه الأعلى بمقدار 20 درجة.

div {
    transform: skewY(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه الأسفل بمقدار 20 درجة.

div {
    transform: skewY(-20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بمقدار 20 درجة.

div {
    transform: skew(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة.

div {
    transform: skew(-20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليمين بمقدار 20 درجة و للأعلى بمقدار 20 درجات.

div {
    transform: skew(20deg, 10deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه اليسار بنسبة 20 بكسل و للأسفل بنسبة 10 بكسل.

div {
    transform: skew(-20deg, -10deg);
}

تحديد كل الخصائص الثنائية الأبعاد للعنصر

في حال أردت إجراء أكثر من تعديل ثنائي الأبعاد على العنصر، يمكنك استخدام الدالة matrix() و إعطاءها 6 قيم تمثل القيم التي يمكنك إعطاءها للدوال الموضوعة بالترتيب التالي:

في المثال التالي قمنا بجعل حجم العنصر عمودياً يساوي 1 (أي لم نغيره)، مائل عمودياً بنسبة 0 (أي لم نغيّره)، مائل نحو اليمين بنسبة 50 و هذا يعني مائل بنسبة 50% أو بزاوية 45 درجة، حجم العنصر أفقياً يساوي 1 (أي لم نغيّره)، بعيد من جهة اليسار بمقدار 40 بكسل، و بعيد من الأعلى بمقدار 80 بكسل.

div {
    transform: matrix(1, 0, -0.50, 1, 40, 80);
}