تحويلات CSS 2D
تحويلات CSS 2D
تسمح لك تحويلات CSS بتحريك العناصر وتدويرها وقياسها وانحرافها.
مرر الماوس فوق العنصر أدناه لترى تحول ثنائي الأبعاد:
ستتعرف في هذا الفصل على خاصية CSS التالية:
transform
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
طرق تحويل CSS 2D
باستخدام خاصية CSS ، transformيمكنك استخدام طرق التحويل ثنائية الأبعاد التالية:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
نصيحة: سوف تتعلم المزيد عن التحولات ثلاثية الأبعاد في الفصل التالي.
طريقة الترجمة ()
تقوم translate()الطريقة بنقل عنصر من موضعه الحالي (وفقًا للمعلمات المعطاة للمحور X والمحور Y).
ينقل المثال التالي عنصر <div> بمقدار 50 بكسل إلى اليمين ، و 100 بكسل لأسفل من موضعه الحالي:
مثال
div
{
transform: translate(50px, 100px);
}
طريقة التدوير ()
تقوم rotate()الطريقة بتدوير عنصر في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة وفقًا لدرجة معينة.
يقوم المثال التالي بتدوير عنصر <div> بمقدار 20 درجة في اتجاه عقارب الساعة:
مثال
div
{
transform: rotate(20deg);
}
سيؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة.
يقوم المثال التالي بتدوير عنصر <div> 20 درجة عكس اتجاه عقارب الساعة:
مثال
div
{
transform: rotate(-20deg);
}
المقياس () الطريقة
تزيد الطريقة 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()الطريقة بإمالة عنصر على طول المحور X بالزاوية المحددة.
المثال التالي يحرف العنصر <div> بمقدار 20 درجة على طول المحور X:
مثال
div
{
transform: skewX(20deg);
}
طريقة () الانحراف
تقوم skewY()الطريقة بإمالة عنصر على طول المحور ص بالزاوية المعطاة.
المثال التالي يحرف العنصر <div> بمقدار 20 درجة على طول المحور الصادي:
مثال
div
{
transform: skewY(20deg);
}
طريقة الانحراف
تقوم skew()الطريقة بإمالة عنصر على طول المحور X و Y بواسطة الزوايا المعطاة.
المثال التالي يحرف العنصر <div> بمقدار 20 درجة على طول المحور X ، و 10 درجات على طول المحور Y:
مثال
div
{
transform: skew(20deg, 10deg);
}
إذا لم يتم تحديد المعلمة الثانية ، فسيكون لها قيمة صفرية. لذلك ، فإن المثال التالي يحرف عنصر <div> بمقدار 20 درجة على طول المحور X:
مثال
div
{
transform: skew(20deg);
}
طريقة المصفوفة
تجمع هذه matrix()الطريقة بين جميع طرق التحويل ثنائية الأبعاد في طريقة واحدة.
تأخذ طريقة المصفوفة () ستة معاملات ، تحتوي على وظائف رياضية ، مما يسمح لك بتدوير العناصر وقياسها ونقلها (ترجمة) وانحرافها.
المعلمات هي كما يلي: المصفوفة (scaleX () ، skewY () ، skewX () ، scaleY () ، translateX () ، translateY ())
مثال
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
خصائص تحويل CSS
يسرد الجدول التالي جميع خصائص التحويل ثنائي الأبعاد:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
طرق تحويل CSS 2D
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |