` 20 درجة على طول المحور الصادي:
### مثال:
`div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
`
## طريقة الانحراف ()
`skew()` طريقة `skew()` عنصرًا على المحور X و Y بواسطة الزوايا المحددة.
المثال التالي يزيح عنصر `
` 20 درجة على طول المحور X ، و 10 درجات على طول المحور الصادي:
### مثال:
`div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
`
إذا لم يتم تحديد المعلمة الثانية ، فإنها تحتوي على قيمة صفرية. لذلك ، ما يلي على سبيل المثال يتخطى عنصر `
` 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