سرخط خبرها

transform در css متد scale

transform در css متد scale

توسط متد scale می توانید ابعاد عنصر مورد نظر خود را در دو جهت افقی و عمودی افزایش دهید . با استفاده از () scale میتوانید اندازه یک المنت را زیاد و کم کنید . مقدار آن بستگی به پارامتر هایی دارد که به عنوان عرض ( محور X ) و ارتفاع( محور Y ) به آن می دهید . با استفاده از این مقدار می توان اشیا را چندین برابر کرد.این مقدار، مقدار عددی بدون واحد دریافت میکند 

برای این منظور باید مقادیری که می خواهید عنصر مورد نظرتان تغییر اندازه دهد را به ترتیب افقی و عمودی در پرانتز مقابل متد scale تعیین کنید .

برای مثال اگر مقدار ۳ را تعیین کنید ، عرض و طول عنصر مورد نظرتان ۳ برابر خواهد شد .
شکل کلی استفاده از این خاصیت به صورت زیر است :

transform : scale ( value1 , value2 ) ;
مثال : transform : scale ( 2 , 3 ) ;

value1

این پارامتر مقدار اندازه ای که عرض عنصر تغییر می کند ، را به صورت یک عدد تعیین می کند .
به کار بردن مقدار مثبت باعث بزرگ شدن عنصر می شود .
تعیین این پارامتر اجباری است .

value2
این پارامتر مقدار اندازه ای که طول عنصر تغییر می کند ، را به صورت یک عدد تعیین می کند .
به کار بردن مقدار مثبت باعث بزرگ شدن عنصر می شود .
تعیین این پارامتر اجباری است . 

()scaleX : این متد ابعاد عنصر رو در حالت افقی افزایش میده .

()scaleY :این متد ابعاد رو در حالت عمودی افزایش میده .

 

پشتیبانی در مرورگر های مختلف :

متاسفانه خاصیت scale به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :

مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت( ) moz-transform- : scale بنویسید . 

مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت( ) o-transform- : scale بنویسید . 

مرورگر اینترنت اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت( ) ms-transform- : scale بنویسید . 

مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت( ) webkit-transform- : scale بنویسید .

transform:scale(1.5, 1)

کد بالا شی مورد نظر را از جهت افقی ۱.۵ برابر میکند و از جهت عمودی یعنی Y یک برابر میکند پس از جهت عمودی تغییری نخواهد کرد.

 

برای مثال ما تصویری داریم که میخواهیم طول و عرض آن با ضریب ۱٫۵ برابر نمایش داده شود: عدد ۱٫۵  به این معناس که عنصر عرض و ارتفاع عنصر ۱٫۵   برابر افزایش یابد. (بزرگنمایی)

img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
 }
مقدار (scale(2,4 یعنی عرض آن دو برابر اندازه اصلی و ارتفاع آن ۴ برابر شود .
div
{
transform: scale(2,4);
-webkit-transform: scale(2,4);
-moz-transform: scale(2,4);
-o-transform: scale(2,4); 
-ms-transform: scale(2,4);
}
QR Code For: transform در css متد scale

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.