خاصية Translate
آخر تحديث: 2026-09-13
translate خاصية Translate
خاصية translate هي خاصية تحويل فردية تحرّك العنصر في فضاء ثنائي الأبعاد أو ثلاثي الأبعاد. لها نفس تأثير transform: translate()، ولكن كخاصية مستقلة تسمح بالتحكم في الإزاحة بشكل منفصل دون التأثير على تحويلات أخرى مثل التدوير والقياس — وهو أمر مفيد جداً عند الرغبة في تحريك كل تحويل بشكل مستقل.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
translate: none | <length-percentage> [<length-percentage> [<length>]?]?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون إزاحة |
<length> | <percentage> | النوع | قيمة الإزاحة (يمكن تحديد x و y و z) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| translate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يقبل translate من 1 إلى 3 قيم: قيمة واحدة تحرّك على المحور X فقط؛ قيمتان تحرّكان على المحورين X و Y؛ والقيمة الثالثة تحرّك أيضاً على المحور Z (ويتطلب ذلك perspective لكي يظهر).
تلميح： النِّسب المئوية في translate نسبة إلى حجم العنصر نفسه، وليس إلى العنصر الأب — على عكس left/top.
❓ الأسئلة الشائعة
Qما الفرق بين خاصية translate و left/top؟
Aيُنتج translate إزاحة بصرية فقط: لا يغيّر تدفّق المستند ولا يسبّب إعادة تخطيط (reflow)؛ يقوم المتصفح بترقية العنصر إلى طبقة تركيب يتولّاها معالج GPU، لذا تبقى الحركة سلسة. أما left/top فتغيّر موضع التخطيط وتُجبر على إعادة التخطيط والرسم في كل إطار — أداء أسوأ، كما تدفع العناصر المحيطة. للأنيميشن والتحريك عند المرور (hover)، يُفضَّل استخدام translate أو transform: translate().
Qهل توجد فروق في الأداء بين translate و transform: translate()؟
Aيتشابه كلاهما تقريباً في العرض وكلاهما يعمل على طبقة تركيب. الفرق الحقيقي يكمن في التحكم: خاصية translate المستقلة يمكن تحريكها بمفردها دون الكتابة فوق قيم transform الموجودة مسبقاً على العنصر، مثل التدوير أو القياس — وهو أمر رائع لتحريك كل تحويل بشكل مستقل. أما transform: translate() فهو ضمن نفس القائمة مع الدوال الأخرى، لذا يتطلب تغييره إعادة كتابة القائمة بالكامل.
Qبِمَ تتعلّق النِّسب المئوية في translate، ولماذا تختلف عن left؟
Aالنِّسب المئوية في translate نسبة إلى أبعاد العنصر نفسه، بينما النِّسب المئوية في left/top نسبة إلى الكتلة المحتوية (containing block). على سبيل المثال، translate: 100% تحرّك العنصر إلى اليمين بمقدار عرضه. بالاستفادة من ذلك، يعطي الجمع بين position: absolute و translate: -50% -50% توسيطاً للعنصر أفقياً وعمودياً دون معرفة حجمه.
Qلماذا لا أرى أي تأثير بصري من translateZ في شيفرة CSS الخاصة بي؟
Aيتحرك translateZ على طول المحور Z، ولكن بدون perspective لا يتغيّر حجم الإسقاط، لذا يبدو العنصر ثابتاً. أعطِ العنصر الأب خاصية perspective، أو أدرج دالة perspective() ضمن transform، لرؤية تغيّر العمق حيث القريب كبير والبعيد صغير. ولنفس السبب، فإن القيمة الثالثة لـ translate لا تهم إلا في المشاهد ثلاثية الأبعاد.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
