خصائص scale CSS
تعريف والاستخدام
تكبير الخاصية تسمح لك بتغيير حجم العنصر.
تكبير تعريف الخاصية قيم التكبير على محور x وy. يمكنك أيضًا تعريف قيمة التكبير على محور z.
يمكن أن تكون القيم لتكبير واحدة أو إثنين أو ثلاثة.
- إذا تم تقديم قيمة واحدة، يتم تكبير العنصر بنفس النسبة على محور x وy.
- إذا تم تقديم إثنين من القيم، يتم تكبير العنصر على محور x وy بنسب محددة.
- إذا تم تقديم ثلاثة قيم، يتم تكبير العنصر على محور x، y وz بنسب محددة.
للتفهم بشكل أفضل تكبير للإطلاع على الخاصية، انظرعرض.
ملاحظة:تكنيك آخر لتكبير العنصر هو استخدام خاصية دالة scale() CSS خصائص التحويل CSS على هذه الصفحة. انظر تكبير يمكن القول إن الخاصية هي طريقة أكثر بساطة وأكثر وضوحًا لتكبير العنصر.
مثال
مثال 1
تغيير حجم العنصر:
div {
تكبير: 2;
}
مثال 2
عند تكبير عندما يتم تعيين الخاصية لقيمتين، يتم تعيين الحجم على محور x وy بشكل منفصل. هنا، يتم مضاعفة حجم العنصر على محور x، وضاعف الحجم على محور y:
div {
تكبير: 2 50%;
}
جملة CSS
تكبير: محور x محور y محور z|الافتراضي|تنقل;
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| محور x |
تعريف نسبة التكبير على محور x. القيم الممكنة:
|
| محور y |
تعريف نسبة التكبير على محور y. القيم الممكنة:
|
| محور z |
تعريف نسبة التكبير على محور z. القيم الممكنة:
|
| الافتراضي | ضع هذا الخصائص في قيمته الافتراضية. انظر الافتراضي. |
| تنقل | يرجى الرجوع إلى كيفية تنقل هذا الخصائص من عنصر الوالد. انظر تنقل. |
تفاصيل التقنية
| القيمة الافتراضية: | لا شيء |
|---|---|
| التنقل: | لا |
| تحريك التصنيع: | يدعم. انظر:خصائص التحريك. |
| الإصدار: | CSS3 |
| جافا سكربت الجملة: | object.style.scale="2 0.7" |
دعم المتصفح
الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية لأول مرة بالكامل.
| كروم | إدج | فايرفوكس | سفاري | أوبرا |
|---|---|---|---|---|
| 104 | 104 | 72 | 14.1 | 90 |
الصفحات ذات الصلة
دروس:تحويل CSS 2D
دروس:تحويلات 3D CSS
المرجع:خصائص rotate CSS
المرجع:خصائص translate CSS
