در مطالب قبلی در مورد خاصیت transform در زبان برنامه نویسی CSS3 برای شما توضیحات لازم را دادیم و شما با این خاصیت آشنا شدید.در این مطلب قصد داریم تا شما را با یکی از متدهای این
خاصیت آشنا کنیم. پس از توضیح اولیه خاصیت transform و نحوه استفاده از آن ، باید با انواع متدهای این خاصیت آشنا شوید .در ادامه این مطلب یکی از متدهای این خاصیت را تشریح وبررسی می کنیم.
خاصیت transform – متد skew :
به وسیله متد skew خاصیت transform ، می توانید عنصر مورد نظر خود را در ۲ جهت عمودی و افقی به صورت ۳ بعدی ، بچرخانید .
برای این منظور باید میزان درجه ای که می خواهید عنصر مورد نظر خود را در ۲ جهت افقی و عمودی بچرخانید ، به ترتیب در پرانتز مقابل متد skew بر حسب واحد deg تعیین کنید .
چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
این افکت یکی از قابلیت های منحصر به فرد در CSS 3 است که تنها با نوشتن یک قطعه کد ساده امکانپذیر است .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;(Syntax: transform : skew ( deg1 , deg2
(transform : skew ( 90deg , 45deg:مثال
توضیح هر یک از موارد syntax :
deg1:
این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، بر حسب درجه در جهت افقی چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است .
deg2:
این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، در جهت عمودی بر حسب درجه چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است .
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
کد لازم برای پشتیانی نوع مرورگر:
مرورگر فایرفاکس :با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) moz-transform- : skew بنویسید .
مرورگر اپرا: با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) o-transform- : skew بنویسید .
مرورگر اینترنت: اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) ms-transform- : skew بنویسید .
مرورگر کروم: با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) webkit-transform- : skew بنویسید .
