خاصية Rotate
آخر تحديث: 2026-09-13
rotate خاصية Rotate
خاصية rotate هي خاصية تحويل فردية تدوّر العنصر حول محور محدد في فضاء ثنائي أو ثلاثي الأبعاد. كخاصية مستقلة يمكن التحكم فيها بشكل منفصل عن تحويلات أخرى مثل translate و scale، وهو أمر مفيد بشكل خاص عند الرغبة في تحريك زاوية الدوران بمفردها.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
rotate: none | <angle> | [ x | y | z | <number>{3} ] <angle>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون دوران |
<angle> | النوع | زاوية الدوران |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| rotate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： عند عدم تحديد محور، يدور العنصر حول المحور Z (العمودي على الشاشة). يمكنك تحديد المحور x أو y أو z، أو متجه مخصص، من أجل دوران ثلاثي الأبعاد.
تلميح： القيم الموجبة تدور في اتجاه عقارب الساعة عند النظر على طول المحور في اتجاهه الموجب؛ والقيم السالبة تدور عكس اتجاه عقارب الساعة.
❓ الأسئلة الشائعة
Qكيف أجعل العنصر يتأرجح ذهاباً وإياباً بدلاً من الدوران المستمر؟
Aشغّل الأنيميشن بالتناوب في كلا الاتجاهين: استخدم animation-direction: alternate واكتب إطارين أساسيين، مثل rotate: -10deg في إطار from و rotate: 10deg في إطار to. عند كتابة إطار to فقط، يستخدم إطار 0% تلقائياً الحالة الأولية للعنصر. يمكنك أيضاً تبديل فئة عبر JavaScript مع دمجها مع transition.
Qهل خاصية rotate هي نفسها transform: rotate() في CSS؟
Aبصرياً هما متطابقتان — كلاهما يدور حول المحور المحدد. الفرق هو أن خاصية rotate المستقلة يمكن تحريكها بمفردها دون التأثير على translate أو scale أو تحويلات أخرى موجودة بالفعل في transform، وهو أمر مفيد للتحكم في كل بُعد بشكل منفصل. أما transform: rotate() فتُكتب في نفس القائمة مع دوال transform الأخرى، وترتيب القائمة مهم عند تغييرها.
Qما محاور الدوران التي يدعمها rotate؟ كيف أدور حول X أو Y؟
Aعند عدم كتابة محور، تكون الدوران افتراضياً حول المحور Z (العمودي على الشاشة)، وهو ما يعادل rotateZ. استخدم rotate: x 45deg للمحور X، و rotate: y 45deg للمحور Y، أو متجهاً مخصصاً مثل rotate: 1 1 0 45deg. تحتاج الدورانات حول X أو Y إلى perspective على العنصر الأب لإظهار عمق حقيقي.
Qهل يدعم rotate الزوايا السالبة أو الزوايا التي تتجاوز 360 درجة؟
Aنعم. rotate: -45deg يدور 45 درجة عكس اتجاه عقارب الساعة، وقيمة تتجاوز 360deg مثل 720deg تُظهر دورتين كاملتين أثناء الأنيميشن. تقبل الزوايا وحدات deg و grad و rad و turn — حيث يعادل 0.25turn قيمة 90deg. لاحظ أنه في الأنماط الثابتة يبدو 360deg و 0deg متشابهين، ولكن في الأنيميشن يُعرض الدوران بالكامل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
