188 lines
7.9 KiB
Markdown
188 lines
7.9 KiB
Markdown
---
|
|
title: CSS3 2d Transforms
|
|
localeTitle: 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 |