freeCodeCamp/guide/arabic/css/css3-2d-transforms/index.md

title, localeTitle

title	localeTitle
CSS3 2d Transforms	CSS3 2d يحول

CSS3 2d يحول

تتيح لك تحويلات CSS3 ترجمة العناصر وتدويرها وتغيير حجمها وتشويشها.

التحويل هو تأثير يسمح لعنصر بتغيير الشكل والحجم و موضع.

يدعم CSS3 التحولات ثنائية وثلاثية الأبعاد.

دعم المستعرض للتحويل 2D

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

الأرقام متبوعة بـ -ms- أو -webkit- أو -moz- أو -o- تحديد الإصدار الأول ذلك عملت مع البادئة.

| الملكية كروم | IE | فايرفوكس سفاري الأوبرا | | --------------------------------------- | ---------------------- | ------------------ | ------------------- | -------------------- | -------------------------------------------- | | تحويل | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- | | تحويل المنشأ (بناء جملة اثنين) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |

CSS3 2D يحول

أساليب:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

طريقة الترجمة ()

تقوم طريقة translate() بنقل عنصر من موقعه الحالي (وفقًا لـ إلى المعلمات المعطاة للمحور X والمحور Y).

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

مثال:

div { -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */ transform: translate(50px, 100px); }

طريقة التدوير ()

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

يقوم المثال التالي بتدوير عنصر <div> باتجاه عقارب الساعة بـ 20 درجة:

مثال:

div { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); }

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

يقوم المثال التالي بتدوير عنصر <div> عكس اتجاه عقارب الساعة بـ 20 درجات:

مثال:

div { -ms-transform: rotate(-20deg); /* IE 9 */ -webkit-transform: rotate(-20deg); /* Safari */ transform: rotate(-20deg); }

مقياس () الطريقة

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

المثال التالي يزيد عنصر <div> ليكون مرتين من به العرض الأصلي ، وثلاث مرات من ارتفاعه الأصلي:

مثال:

div { -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3); }

المثال التالي يقلل عنصر <div> ليكون نصف أصله الأصلي العرض والارتفاع:

مثال:

div { -ms-transform: scale(0.5, 0.5); /* IE 9 */ -webkit-transform: scale(0.5, 0.5); /* Safari */ transform: scale(0.5, 0.5); }

طريقة skewX ()

skewX() طريقة skewX() عنصرًا على طول المحور السيني بزاوية معينة.

المثال التالي يزيح عنصر <div> 20 درجة على طول المحور X:

مثال:

div { -ms-transform: skewX(20deg); /* IE 9 */ -webkit-transform: skewX(20deg); /* Safari */ transform: skewX(20deg); }

طريقة (())

skewY() طريقة skewY() عنصرًا على طول المحور ص من الزاوية المحددة.

المثال التالي يزيح عنصر <div> 20 درجة على طول المحور الصادي:

مثال:

div { -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg); }

طريقة الانحراف ()

skew() طريقة skew() عنصرًا على المحور X و Y بواسطة الزوايا المحددة.

المثال التالي يزيح عنصر <div> 20 درجة على طول المحور X ، و 10 درجات على طول المحور الصادي:

مثال:

div { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg); }

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

مثال:

div { -ms-transform: skew(20deg); /* IE 9 */ -webkit-transform: skew(20deg); /* Safari */ transform: skew(20deg); }

طريقة المصفوفة ()

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

تأخذ طريقة المصفوفة (6) المعلمات ، التي تحتوي على وظائف الرياضيات ، والتي يسمح لك بتدوير ، قياس ، نقل (ترجمة) ، وتحريف العناصر.

المعلمات هي على النحو التالي: مصفوفة (scaleX ()، skewY ()، skewX ()، scaleY ()، translateX ()، translateY ())

مثال:

div { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); }

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

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

| الملكية الوصف | | ---------------- | -------------------------------------------------- ------- | | تحويل | يطبق تحويل ثنائي أو ثلاثي الأبعاد على عنصر | | تحويل أصل | يسمح لك بتغيير الموقف على العناصر المحولة |

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

| وظيفة الوصف | | --------------------- | -------------------------------------------------- ----------------------- | | مصفوفة (n، n، n، n، n، n) | يحدد تحويل ثنائي الأبعاد ، باستخدام مصفوفة من ست قيم | | ترجمة (س ، ص) | تعريف ترجمة ثنائية الأبعاد ، وتحريك العنصر على طول المحور X- و Y- | translateX (n) | يحدد ترجمة ثنائية الأبعاد ، وينقل العنصر على طول المحور السيني | ترجماتي (n) | تعريف ترجمة ثنائية الأبعاد ، تحريك العنصر على طول المحور ص | | مقياس (س ، ص) | يعرّف تحويل مقياس ثنائي الأبعاد ، يغيّر عرض العناصر وارتفاعها | | scaleX (n) | يعرّف تحويل نطاق ثنائي الأبعاد ، يغيّر عرض العنصر | | scale (n) | يعرِّف تحويل نطاق ثنائي الأبعاد ، ويؤدي إلى تغيير ارتفاع العنصر | تدوير (زاوية) | يحدد دوران 2D ، يتم تحديد الزاوية في المعلمة | | انحراف (x-angle، y-angle) | يعرّف تحول انحراف ثنائي الأبعاد على المحور X- و Y- | skewX (زاوية) | يحدد تحول انحراف ثنائي الأبعاد على المحور X | | skewY (زاوية) | يعرّف تحول انحراف ثنائي الأبعاد على المحور "ص"

معلومات اكثر:

• https://css-tricks.com/almanac/properties/t/transform/
• https://www.w3schools.com/css/css3_2dtransforms.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform