تبلیغات متنی و بنر

آموزش CSS 3 - بزرگ کردن عناصر با متد scale

خاصیت transform - متد scale :

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

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

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

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

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

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

مثال عملی :

در مثال زیر به تشریح نحوه استفاده از این متد پرداخته ایم .
در مثال زیر یک عکس تگ < / img > داریم که ابتدا در حالت عادی نمایش داده شده است . اما در حالت دوم آن عکس را با به کار بردن مقادیر مثبت بزرگ کرده ایم . به کدها و خروجی مثال دقت نمایید :

حالت 1 - اندازه اولیه عکس
< img src="../Pic/ADS/css.png" /> کد
خروجی

حالت 2 - بزرگ کردن عرض عنصر به میزان 3 برابر و ارتفاع آن به 2 برابر
< img src="../Pic/ADS/css.png" style="-ms-transform: scale ( 2,3 ) ; /* ie 9 */     -webkit-transform: scale ( 2,3 ) ; /* chrome */     -o-transform: scale ( 2,3 ) ; /* opera */     -moz-transform: scale ( 2,3 ) ; /* firefox */"     /> کد







خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟