خاصية Scale
آخر تحديث: 2026-09-13
scale خاصية Scale
خاصية scale هي خاصية تحويل فردية تكبّر العنصر أو تُصغّره في فضاء ثنائي أو ثلاثي الأبعاد. كخاصية مستقلة يمكن التحكم فيها بشكل منفصل عن تحويلات أخرى مثل translate و rotate، وهو أمر مفيد بشكل خاص عند الرغبة في تحريك التكبير بمفرده — مثل تغذية راجعة عند الضغط على زر، ومعاينة تكبير الصور، وتفاعلات مشابهة.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
scale: none | <number> [<number> [<number>]?]?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون تكبير |
<number> | النوع | معامل التكبير (يمكن تحديد x و y و z) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scale | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： قيمة واحدة تكبّر X و Y بشكل متساوٍ؛ قيمتان تتحكمان في المحورين X و Y بشكل مستقل؛ والقيمة الثالثة تكبّر أيضاً على طول Z (ويتطلب ذلك perspective لكي يظهر).
تحذير： معامل تكبير يساوي 0 يجعل العنصر يختفي تماماً؛ والقيمة السالبة تقلب العنصر — فمثلاً scale(-1) يعكسه كالمرآة.
❓ الأسئلة الشائعة
Qهل تؤثر خاصية scale على الحجم الفعلي والتخطيط للعنصر؟
Aلا. scale بصري بحت: يظل العنصر يشغل حجمه ومساحته الأصلية في تدفّق المستند، ولا تتحرك العناصر المحيطة. هذا يختلف تماماً عن width و height، مما يعني أيضاً أن العنصر المكبّر قد يفيض من حاويته أو يغطي محتوى مجاوراً — تعامل أنت مع الحدود البصرية.
Qما الفرق بين scale وتغيير width/height؟
Aيؤدي تغيير width أو height إلى تغيير حجم التخطيط ويُسبب إعادة تخطيط ويدفع العناصر المحيطة — بأداء أسوأ. أما scale فلا يكبّر إلا بصرياً، ولا يؤثر على التخطيط، ويعمل على طبقة تركيب يرسمها معالج GPU، ويتحرك بسلاسة. استخدم scale عند الرغبة في تكبير متحرك، واستخدم width/height عند الحاجة الفعلية لتغيير حجم التخطيط.
Qما الفرق بين خاصية scale و zoom في CSS؟
Ascale تحويل قياسي في CSS: لا يغيّر إلا الحجم البصري، ولا يغيّر مساحة التخطيط، ويتحرك على طبقة التركيب بأداء جيد. أما zoom فهو خاصية غير قياسية تغيّر أيضاً الحجم الفعلي لتخطيط العنصر ورسم العناصر الفرعية، مما يؤثر على تدفّق المستند ويسبّب إعادة تخطيط. من حيث التوافق بين المتصفحات وأداء الأنيميشن، scale أفضل — يُفضَّل استخدامه في بيئة الإنتاج.
Qكيف أعكس العنصر كصورة مرآة باستخدام scale سالب؟
Aقيمة سالبة تقلب العنصر على طول المحور المقابل: scale: -1 تعكسه أفقياً على المحور X (يمين ويسار مقلوبان)، و scale: 1 -1 تقلبه عمودياً على المحور Y. لا يؤثر الانعكاس إلا على الشكل البصري وليس على التخطيط. يمكنك دمجه مع transitions أو animations لتأثير قلب، ولكن تذكّر أن النص يُعكس أيضاً — وعند الحاجة يمكن تصحيح ذلك بدمج عدة تحويلات.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
