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

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

تسمح التحويلات (transforms) في CSS بتحريك وتدوير وتكبير وتدرج العناصر.

ضع المؤشر فوق العنصر التالي لرؤية التحويلات الثنائية الأبعاد:

2D rotate

في هذا الفصل، ستتعلم الخاصيات التالية لـ CSS:

  • transform

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

الخصائص Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

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

من خلال استخدام CSS transform يمكنك استخدام هذه الطرق للتحويلات الثنائية الأبعاد كالتالي:

  • translate()
  • rotate()
  • scaleX()
  • طريقة scaleY()
  • scale()
  • طريقة skewX()
  • طريقة skewY()
  • طريقة skew()
  • matrix()

نصيحة:ستتعلم التحويلات الثلاثية الأبعاد في الفصل القادم.

طريقة translate()

Translate

translate() يتحرك العنصر من موقعه الحالي بناءً على المعلمات المحددة لل轴向 X والي.

النموذج التالي يتحرك عنصر <div> إلى اليمين 50 بكسل ويحركه إلى الأسفل 100 بكسل من موقعه الحالي:

مثال

div {
  transform: translate(50px, 100px);
}

تجربة الآن

طريقة rotate()

Rotate

rotate() يدير العنصر بناءً على الزاوية المقدمة إما في الإتجاه الساعي أو المعاكس للساعة.

النموذج التالي يدير عنصر <div> بزاوية 20 درجة في الإتجاه الساعي.

مثال

div {
  transform: rotate(20deg);
}

تجربة الآن

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

النموذج التالي يدير عنصر <div> بزاوية 20 درجة في الإتجاه المعاكس للساعة.

مثال

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

تجربة الآن

طريقة scale()

Scale

scale() يضيف أو يقلل حجم العنصر (بناءً على المعلمات العرضية والارتفاعية المقدمة).

النموذج التالي يزيد عنصر <div> إلى ضعف عرضه وثلاثة أضعاف ارتفاعه الأصلي:

مثال

div {
  transform: scale(2, 3);
}

تجربة الآن

النموذج التالي يقلل عنصر <div> إلى نصف عرضه وارتفاعه الأصلي:

مثال

div {
  transform: scale(0.5, 0.5);
}

تجربة الآن

طريقة scaleX()

scaleX() يضيف أو يقلل عرض العنصر.

النموذج التالي يزيد عنصر <div> إلى ضعف عرضه الأصلي:

مثال

div {
  transform: scaleX(2);
}

تجربة الآن

النموذج التالي يقلل عنصر <div> إلى نصف عرضه الأصلي:

مثال

div {
  transform: scaleX(0.5);
}

تجربة الآن

طريقة scaleY()

طريقة scaleY() تضيف أو تقلل من طول العنصر.

يظهر المثال التالي أن عنصر <div> يزيد إلى ثلاث مرات من طوله الأصلي:

مثال

div {
  transform: scaleY(3);
}

تجربة الآن

يظهر المثال التالي أن عنصر <div> يتناقص إلى نصف طوله الأصلي:

مثال

div {
  transform: scaleY(0.5);
}

تجربة الآن

طريقة skewX()

طريقة skewX() تتيح الطريقة تحريف العنصر Along X المحور بزاوية معينة.

يظهر المثال التالي أن عنصر <div> يتجه إلى X المحور بزاوية 20 درجة:

مثال

div {
  transform: skewX(20deg);
}

تجربة الآن

طريقة skewY()

طريقة skewY() تتيح الطريقة تحريف العنصر Along Y المحور بزاوية معينة.

يظهر المثال التالي أن عنصر <div> يتجه إلى Y المحور بزاوية 20 درجة:

مثال

div {
  transform: skewY(20deg);
}

تجربة الآن

طريقة skew()

طريقة skew() تتيح الطريقة تحريف العنصر Along X و Y المحاور بزاوية معينة.

يظهر المثال التالي أن عنصر <div> يتجه إلى X المحور بزاوية 20 درجة، ويجعل عنصر <div> يتجه إلى Y المحور بزاوية 10 درجة:

مثال

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

تجربة الآن

إذا لم يتم تحديد المعامل الثاني، فإن القيمة صفر. لذلك، فإن المثال التالي يجعل عنصر <div> يتجه إلى X المحور بزاوية 20 درجة:

مثال

div {
  transform: skew(20deg);
}

تجربة الآن

طريقة matrix()

Rotate

matrix() تجميع جميع طرق التحويل ثنائي الأبعاد في واحدة.

matrix() يمكن للطريقة قبول ستة معلمات، بما في ذلك الدوال الرياضية، مما يتيح لك تقلب وتكبير وتحريك (نقل) وتحريف العنصر.

المتغيرات كما يلي: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

مثال

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

تجربة الآن

خصائص التحويل CSS

يظهر الجدول أدناه جميع خصائص التحويل ثنائي الأبعاد:

الخصائص وصف
transform تطبيق تحويل ثنائي الأبعاد أو ثلاثي الأبعاد على العنصر.
transform-origin يسمح لك بتغيير موقع العنصر المحوّل.

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

دالة وصف
matrix(n,n,n,n,n,n) تعريف التحويل ثنائي الأبعاد باستخدام مصفوفة من ستة أرقام.
translate(x,y) تعريف التحويل ثنائي الأبعاد، تحريك العنصر Along X و Y المحاور.
translateX(n) تعريف التحويل ثنائي الأبعاد، تحريك العنصر Along X المحور.
translateY(n) تعريف التحويل ثنائي الأبعاد، تحريك العنصر Along Y المحور.
scale(x,y) تعريف تحويل التكبير الثنائي الأبعاد، بتغيير العرض والطول العنصر.
scaleX(n) تعريف تحويل التكبير الثنائي الأبعاد، بتغيير عرض العنصر.
scaleY(n) تعريف تحويل التكبير الثنائي الأبعاد، بتغيير طول العنصر.
rotate(زاوية) تعريف دوران الثنائي الأبعاد، في معامل معين.
skew(زاوية X,زاوية Y) تعريف تحويل الانزياح الثنائي الأبعاد، بطول المحاور X وY.
skewX(زاوية) تعريف تحويل الانزياح الثنائي الأبعاد، بطول المحور X.
skewY(زاوية) تعريف تحويل الانزياح الثنائي الأبعاد، بطول المحور Y.