CSS/transform

الخاصية transform في CSS تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا.

بطاقة الخاصية

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* كلمة محجوزة */
transform: none;

/* دالة */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* أكثر من دالة */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* القيم العامة */
transform: inherit;
transform: initial;
transform: unset;

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة -webkit-) 36.0	3.5 (مع السابقة -moz-) 16.0	9 (مع السابقة -ms-) 10	15 (مع السابقة -webkit-) 23	3.1 (مع السابقة -webkit-) 9.0
3D	12.0 (مع السابقة -webkit-) 36.0	10.0 (مع السابقة -moz-) 16.0	10	15 (مع السابقة -webkit-) 23	4.0 (مع السابقة -webkit-) 9.0

البنية العامة

تقبل الخاصية transform الكلمة المحجوزة none أو دالة <transform-function> أو أكثر.

none

لن يُطبَّق أيّ تحويل على العنصر.

<transform-function>

دالة أو أكثر من دوال التحويل التي ستُطبَّق على العنصر، وسيكون ترتيب تطبيقها من اليسار إلى اليمين.

البنية الرسمية

transform: none | <transform-list>;

حيث:

<transform-list> = <transform-function>+

دوال التحويل

بعض الدوال الآتية تُستخدَم لتطبيق تحويل ثنائي الأبعاد، وبعضها يستعمل لتطبيق تحويل ثلاثي الأبعاد.

translate()‎

translate( <length-percentage> [, <length-percentage> ]? )

تستخدم الدالة translate()‎ لنقل العنصر وفق القيم المُمرَّرة إلى الدالة، إذ يُمثِّل أوّل وسيط الانتقال على المحور x، ويُمثِّل الوسيط الثاني الانتقال على المحور y، وإذا لم توفَّر قيمة للوسيط الثاني فسيتنقل العنصر على المحور x فقط؛ ويمكن أن تكون كلا القيمتين طولًا مطلقًا <length> أو نسبةً مئويةً <percentage>. النسب المئوية تكون نسبةً إلى أبعاد صندوق العنصر.

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

أمثلة مختلفة عن هذه الدالة:

transform: translate(100px);
transform: translate(-100px);
transform: translate(50px, 300px);
transform: translate(50%, 10%);
transform: translate(-100%)
transform: translate(100px, 100px);

translateX()‎

translateX( <length-percentage> )

تستخدم الدالة translateX()‎ لنقل العنصر وفق القيمة المُمرَّرة إلى الدالة على المحور x، ويمكن أن تكون القيمة طولًا مطلقًا <length> أو نسبةً مئويةً <percentage>. النسب المئوية تكون نسبةً إلى أبعاد صندوق العنصر.

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

أمثلة مختلفة عن هذه الدالة:

transform: translateX(300px);
transform: translateX(-50%);
transform: translateX(150%);

translateY()‎

translateY( <length-percentage> )

تستخدم الدالة translateX()‎ لنقل العنصر وفق القيمة المُمرَّرة إلى الدالة على المحور y، ويمكن أن تكون القيمة طولًا مطلقًا <length> أو نسبةً مئويةً <percentage>. النسب المئوية تكون نسبةً إلى أبعاد صندوق العنصر.

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

أمثلة مختلفة عن هذه الدالة:

transform: translateY(300px);
transform: translateY(-50%);
transform: translateY(150%);

scale()‎

scaleX( <number> )

تستخدم الدالة scale()‎ لإعادة تحجيم أحد العناصر مما يؤدي إلى تكبيره أو تصغيره، وتأخذ هذه الدالة قيمتين رقميتين <number>، القيمة الأولى هي sx والقيمة الثانية هي sy، إذ ستؤدي القيمة sx إلى إعادة تحجيم العنصر على المحور x، أما القيمة sy فتُعيد تحجميه على المحور y، وإذا وفّرنا قيمةً واحدةً فسيفترض المتصفح أنَّ القيمة الثانية مساويةٌ لأول قيمة.

إذا كانت القيمة أكبر من 1، فسيزداد حجم العنصر على المحور المُحدَّد، وإذا كانت مساويةً للرقم 1 فسيبقى العنصر على حاله على المحور المُحدَّد، أما إذا كانت القيمة بين الصفر والواحد فستؤدي إلى تصغير العنصر، أما القيمة 0 فستؤدي إلى إخفاء العنصر تمامًا؛ ويُسمَح باستخدام القيم السالبة، لكنها لن تؤدي إلى إعادة تحجيم العنصر وإنما قلبه (flip) في الاتجاه المُحدَّد.

أمثلة مختلفة عن هذه الدالة:

transform: scale(1, 1);
transform: scale(2, 2);
transform: scale(1, 2);
transform: scale(2, 1);
transform: scale(3);
transform: scale(0.5);
transform: scale(0);
transform: scale(-1);

scaleX()‎

scaleX( <number> )

تستخدم الدالة scaleX()‎ لإعادة تحجيم أحد العناصر مما يؤدي إلى تكبيره أو تصغيره على المحور x، وتأخذ هذه الدالة قيمةً رقميةً <number> هي sx، إذ ستؤدي القيمة sx إلى إعادة تحجيم العنصر على المحور x.

إذا كانت القيمة أكبر من 1، فسيزداد حجم العنصر على المحور x، وإذا كانت مساويةً للرقم 1 فسيبقى العنصر على حاله على المحور x، أما إذا كانت القيمة بين الصفر والواحد فستؤدي إلى تصغير العنصر، أما القيمة 0 فستؤدي إلى إخفاء العنصر تمامًا؛ ويُسمَح باستخدام القيم السالبة، لكنها لن تؤدي إلى إعادة تحجيم العنصر وإنما قلبه (flip) أفقيًا (أي كانه دار حول المحور y).

أمثلة مختلفة عن هذه الدالة:

transform: scaleX(2);
transform: scaleX(1);
transform: scaleX(0.25);
transform: scaleX(-1);

scaleY()‎

scaleY( <number> )

تستخدم الدالة scaleY()‎ لإعادة تحجيم أحد العناصر مما يؤدي إلى تكبيره أو تصغيره على المحور y، وتأخذ هذه الدالة قيمةً رقميةً <number> هي sy، إذ ستؤدي القيمة sy إلى إعادة تحجيم العنصر على المحور y.

إذا كانت القيمة أكبر من 1، فسيزداد حجم العنصر على المحور y، وإذا كانت مساويةً للرقم 1 فسيبقى العنصر على حاله على المحور y، أما إذا كانت القيمة بين الصفر والواحد فستؤدي إلى تصغير العنصر، أما القيمة 0 فستؤدي إلى إخفاء العنصر تمامًا؛ ويُسمَح باستخدام القيم السالبة، لكنها لن تؤدي إلى إعادة تحجيم العنصر وإنما قلبه (flip) رأسيًا (أي كانه دار حول المحور x).

أمثلة مختلفة عن هذه الدالة:

transform: scaleY(2);
transform: scaleY(1);
transform: scaleY(0.25);
transform: scaleY(-1);

rotate()‎

rotate( <angle> )

تستخدم الدالة rotate()‎ لتدوير العنصر في الفضاء ثنائي الأبعاد بمقدار الزاوية <angle> المُمرَّرة إليه؛ لاحظ أنَّ العنصر سيدوَّر حول المبدأ الذي يُعرَّف باستخدام الخاصية transform-origin.

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

أمثلة مختلفة عن هذه الدالة:

transform: rotate(45deg);
transform: rotate(-60deg);
transform: rotate(1.5rad);
transform: rotate(1turn);

skew()‎

skew( <angle> [, <angle> ]? )

تستخدم الدالة skew()‎ لجعل العنصر منحرفًا، أي كأننا أمسكنا بضلعين متقابلين من المستطيل وحركناهما باتجاهين مختلفين، مما أدى إلى تحويل المستطيل إلى متوازي أضلاع.

تأخذ هذه الدالة قيمةً واحدةً أو قيمتين، وكلا القيمتين هي زاوية <angle>، وأوّل قيمة تؤدي إلى انحراف العنصر على المحور x (أي كأننا أمسكنا بضلعَي المستطيل وأزحناهما إلى الجانب)، والقيمة الثانية تؤدي إلى انحراف العنصر على المحور y (أي كأننا أمسكنا ضلعَي المستطيل وحركناهما رأسيًا باتجاهين مختلفين). إذا لم تتوافر القيمة الثانية فستُعدّ أنها 0.

skewX()‎

skewX( <angle> )

تستخدم الدالة skewX()‎ لجعل العنصر منحرفًا، أي كأننا أمسكنا بضلعين متقابلين من المستطيل وحركناهما باتجاهين مختلفين، مما أدى إلى تحويل المستطيل إلى متوازي أضلاع.

تأخذ هذه الدالة قيمةً واحدةً، وهي زاوية <angle>، وتؤدي إلى انحراف العنصر على المحور x (أي كأننا أمسكنا بضلعَي المستطيل وأزحناهما إلى الجانب).

أمثلة عن استخدام هذه الدالة:

transform: skewX(30deg);
transform: skewX(-30deg);
transform: skewX(-0.5rad);
transform: skewX(-1turn);
transform: skewX(-90deg);

skewY()‎

skewX( <angle> )

تستخدم الدالة skewY()‎ لجعل العنصر منحرفًا، أي كأننا أمسكنا بضلعين متقابلين من المستطيل وحركناهما باتجاهين مختلفين، مما أدى إلى تحويل المستطيل إلى متوازي أضلاع.

تأخذ هذه الدالة قيمةً واحدةً، وهي زاوية <angle>، وتؤدي إلى انحراف العنصر على المحور Y (أي كأننا أمسكنا ضلعَي المستطيل وحركناهما رأسيًا باتجاهين مختلفين).

أمثلة عن استخدام هذه الدالة:

transform: skewY(30deg);
transform: skewY(-30deg);
transform: skewY(-0.5rad);
transform: skewY(-1turn);
transform: skewY(-90deg);

matrix()‎

matrix( <number> [, <number> ]{5,5} )

تستخدم الدالة matrix()‎ لتطبيق مصفوفة تحويل في الفضاء ثنائي الأبعاد، ويمكن أن تحتوي المصفوفة على أكثر من تحويل في آنٍ واحد، فبدلًا استخدام دالتين أو أكثر في قاعدة واحدة كما يلي:

transform: rotate(45deg) translate(24px,25px);

فيمكن استخدام الدالة matrix()‎ لفعل ذلك باستخدام مصفوفة واحدة:

transform: matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, -0.7071067811865426, 34.648232278140824);

وكما رأيت، من الصعب حساب قيم الدالة matrix()‎ ما لم يكن لك اهتمامٌ كبيرٌ بالرياضيات، وليس من المفترض أصلًا إجراء الحسابات السابقة يدويًا، إذ هنالك أداة مفيدة يمكنك استخدامها لإجراء الحسابات لإخراج مصفوفة يمكن استخدامها مع الدالة matrix()‎.

translateZ()‎

translateZ( <length> )

تستخدم الدالة translateZ()‎ لنقل العنصر وفق القيمة المُمرَّرة إلى الدالة على المحور z، ويمكن أن تكون القيمة طولًا مطلقًا <length> ولا يمكن استخدام النسب المئوية هنا.

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

أمثلة عن استخدام هذه الدالة:

transform: translateZ(300px);
transform: translateZ(-5em);
transform: translateZ(4vh);

translate3d()‎

translate3d( <length-percentage> , <length-percentage> , <length> )

الدالة translate3d()‎ هي الدالة المكافئة للدالة translate()‎ لكن في الفضاء ثلاثي الأبعاد.

أوّل قيمتان هما قيمة الانتقال على المحور x و y، ويمكن أن تكون القيمة طولًا مطلقًا <length> أو نسبةً مئويةً <percentage>. النسب المئوية تكون نسبةً إلى أبعاد صندوق العنصر.

أما القيمة الثالثة فهي الانتقال على المحور z، ويمكن أن تكون القيمة طولًا مطلقًا <length> ولا يمكن استخدام النسب المئوية هنا.

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

أمثلة عن استخدام هذه الدالة:

transform: translate3d(100px, 100px, -200px);
transform: translate3d(50%, -100%, 1em);
transform: translate3d(-100px, -30px, 5vw);

scaleZ()‎

scaleZ( <number> )

تستخدم الدالة scaleZ()‎ لإعادة تحجيم أحد العناصر مما يؤدي إلى تكبيره أو تصغيره على المحور Z، وتأخذ هذه الدالة قيمةً رقميةً <number> هي sz، إذ ستؤدي القيمة sz إلى إعادة تحجيم العنصر على المحور z.

لمّا كانت جميع العناصر في CSS هي كائنات ثنائية الأبعاد، فقد تتساءل كيف ستعيد هذه الدالة تحجيم العنصر إذا لم يكن له «ثخن» أو سماكة.

سيكون أثر هذه الدالة واضحًا عندما تُضبَط الخاصية perspective على العنصر، وتم تدويره في الفضاء ثلاثي الأبعاد.

أمثلة مختلفة عن هذه الدالة:

transform: scaleY(2);
transform: scaleY(1);
transform: scaleY(0.25);
transform: scaleY(-1);

scale3d()‎

scale3d(<number>, <number>, <number>);

الدالة scale3d()‎ هي الدالة المكافئة للدالة scale()‎ لكن في الفضاء ثلاثي الأبعاد، تقبل هذه الدالة ثلاث قيم رقمية <number> هي sx و sy و sz، التي تؤدي إلى إعادة تحجيم العنصر على المحور x و y و z على التوالي وبالترتيب.

إذا كانت القيمة أكبر من 1، فسيزداد حجم العنصر على المحور المُحدَّد، وإذا كانت مساويةً للرقم 1 فسيبقى العنصر على حاله على المحور المُحدَّد، أما إذا كانت القيمة بين الصفر والواحد فستؤدي إلى تصغير العنصر، أما القيمة 0 فستؤدي إلى إخفاء العنصر تمامًا؛ ويُسمَح باستخدام القيم السالبة مع sx و sy، لكنها لن تؤدي إلى إعادة تحجيم العنصر وإنما قلبه (flip) في الاتجاه المُحدَّد.

أمثلة مختلفة عن هذه الدالة:

transform: scale3d(1, 1, 1);
transform: scale3d(2, 2, 2);
transform: scale3d(1, 2, 0); 
transform: scale3d(2, 1, 3);
transform: scale3d(-1, -1, 1);

rotate3d()‎

rotate3d( <number> , <number> , <number> , <angle> );

الدالة rotate3d()‎ هي الدالة المكافئة للدالة rotate()‎ لكن في الفضاء ثلاثي الأبعاد، تقبل هذه الدالة أربع قيم عددية <number> متبوعةً بزاوية <angle>. إذ تُمثِّل أوّل ثلاثة وسائط اتجاه الدوران حيث تُشكِّل شعاعًا [x, y, z] الذي يُستخدَم لتطبيق الدوران المُحدَّد عبر الوسيط الرابع.

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

أمثلة مختلفة عن هذه الدالة:

transform: rotate3d(1, 1, 2, 45deg);
transform: rotate3d(2, 1, 3, 33deg);
transform: rotate3d(1, 0, 0, 45deg);
transform: rotate3d(0, 1, 0, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 0, 50deg);

rotateX()‎

rotateX( <angle> )

الدالة rotateX()‎ تُستخدَم لتدوير عنصر حول المحور x في الفضاء ثلاثي الأبعاد، وهي مكافئة للدالة الآتية:

rotate3d(1, 0, 0, <angle>)

القيم الموجبة ستؤدي إلى تدوير العنصر باتجاه عقارب الساعة، أما القيم السالبة فستؤدي إلى تدويره عكس اتجاه عقارب الساعة. أمثلة مختلفة عن هذه الدالة:

transform: rotateX(30deg);
transform: rotateX(-135deg);
transform: rotateX(90deg);

rotateY()‎

rotateY( <angle> )

الدالة rotateY()‎ تُستخدَم لتدوير عنصر حول المحور y في الفضاء ثلاثي الأبعاد، وهي مكافئة للدالة الآتية:

rotate3d(0, 1, 0, <angle>)

القيم الموجبة ستؤدي إلى تدوير العنصر باتجاه عقارب الساعة، أما القيم السالبة فستؤدي إلى تدويره عكس اتجاه عقارب الساعة. أمثلة مختلفة عن هذه الدالة:

transform: rotateY(30deg);
transform: rotateY(-135deg);
transform: rotateY(90deg);

rotateZ()‎

rotateZ( <angle> )

الدالة rotateZ()‎ تُستخدَم لتدوير عنصر حول المحور z في الفضاء ثلاثي الأبعاد، وهي مكافئة للدالة الآتية:

rotate3d(0, 0, 1, <angle>)

القيم الموجبة ستؤدي إلى تدوير العنصر باتجاه عقارب الساعة، أما القيم السالبة فستؤدي إلى تدويره عكس اتجاه عقارب الساعة. أمثلة مختلفة عن هذه الدالة:

transform: rotateZ(30deg);
transform: rotateZ(-135deg);
transform: rotateZ(90deg);

matrix3d()‎

matrix3d( <number> [, <number> ]{15,15} )

الدالة matrix3d()‎ هي الدالة المكافئة للدالة matrix()‎ لكن في الفضاء ثلاثي الأبعاد، وكما مع الدالة matrix()‎، يمكن أن تستعمل هذه الدالة لتجميع أكثر من تحويل في مصفوفة واحدة، وتقبل هذه الدالة سلسلة التحويلات في شبكة 4x4. على سبيل المثال، بدلًا من استخدام دالتَي تحويل أو أكثر كما يلي:

transform: rotate3d(1, 0, 1, 45deg) translate3d(24px, 25px, 100px);

يمكن باستخدام الدالة matrix3d()‎ دمج هذه التحويلات في مصفوفة واحدة:

transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)

وكما رأيت، من الصعب حساب قيم الدالة matrix()‎ ما لم يكن لك اهتمامٌ كبيرٌ بالرياضيات، وليس من المفترض أصلًا إجراء الحسابات السابقة يدويًا، إذ هنالك أداة مفيدة يمكنك استخدامها لإجراء الحسابات لإخراج مصفوفة يمكن استخدامها مع الدالة matrix()‎.

perspective()‎

perspective( <length> )

تستخدم الدالة perspective()‎ لإعطاء عمق للعنصر بجعل العناصر الأقرب إلى المستخدم تبدو وكأنها أكبر، والعناصر البعيدة ستبدو أصغر، وكلما كانت القيمة الطولية المُمرَّرة إلى هذه الدالة أصغر كانت التأثير أشد، والعكس صحيح.

الدالة perspective()‎ مفيدة لإعطاء شعور بالأبعاد الثلاثة عندما تُطبِّق تحويلات ثلاثية الأبعاد على العناصر، ومن المهم تطبيق منظور باستخدام هذه الدالة وإلا فستبدو التأثيرات ثلاثية الأبعاد وكأنها مسطحة وثنائية البعد.

أمثلة

مثال يوضح تأثير قيمة الخاصية transformعلى شكل العنصر في الفضاء:

<div>Transformed element</div>

شيفرة CSS الخاصة بالعنصر <div>:

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

ملاحظات

يمكن نقل العنصر باستخدام خاصية position في CSS وما يتعلق بها، لكن من الأفضل نقل العناصر باستخدام الدالة translate()‎ لأنها تملك تسارعًا عتاديًا (hardware acceleration)، وبالتالي ستكون أسرع وحركتها أسلس.

انظر أيضًا

• صفحة الخاصيات الفرعية التي تضبطها الخاصية transform وهي transform-origin و transform-style.

مصادر ومواصفات

• مسودة CSS Transforms Level 2.
• مسودة CSS Transforms Level 1.