در مطالب قبلی در مورد خاصیت transform در زبان برنامه نویسی CSS3 برای شما توضیحات لازم را دادیم و شما با این خاصیت آشنا شدید.در این مطلب قصد داریم تا شما را با یکی از متدهای این
خاصیت آشنا کنیم. پس از توضیح اولیه خاصیت transform و نحوه استفاده از آن ، باید با انواع متدهای این خاصیت آشنا شوید .در ادامه این مطلب یکی از متدهای این خاصیت را تشریح وبررسی می کنیم.
خاصیت transform – متد translate :
به وسیله متد translate در خاصیت transform می توانید عنصر مورد نظر خود را به یک نقطه دیگر در صفحه منتقل کنید . برای این منظور باید میزان اندازه ای که می خواهید ، عنصرتان جابجا شود را به صورت دو مقدار افقی و عمودی در مقابل پرانتز متد translate تعیین کنید . برای این منظور معمولا از واحدهایی مثل px یا pt استفاده می شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :
(Syntax: transform : translate ( value1 , value2
( transform : translate ( 90px , 80px:مثال
توضیح هر یک از موارد syntax :
value1:
این پارامتر میزان اندازه ای که عنصر در جهت افقی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند .
تعیین این پارامتر اجباری است .
value2:
این پارامتر میزان اندازه ای که عنصر در جهت عمودی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند .
تعیین این پارامتر اجباری است .
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
کد لازم برای پشتیانی نوع مرورگر:
مرورگر فایرفاکس
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) moz-transform- : translate بنویسید .
مرورگر اپرا
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) o-transform- : translate بنویسید .
مرورگر اینترنت اکسپلورر
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) ms-transform- : translate بنویسید .
مرورگر کروم
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت ( ) webkit-transform- : translate بنویسید .
