---
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