سرخط خبرها

transform در css متد translate

transform در css متد translate

از مقدار translate در css برای جابجا کردن اشیا در مقیاس(واحد) پیکسل استفاده میشود و مقادیر عددی دریافت میکند. میتوان به جای این مقدار translateX یا translateY به ترتیب به معانی جابجایی از مسیر افقی و جابجایی از مسیر عمودی استفاده کرد.

به وسیله متد translate در خاصیت transform می توانید عنصر مورد نظر خود را به یک نقطه دیگر در صفحه منتقل کنید . برای این منظور باید میزان اندازه ای که می خواهید ، عنصرتان جابجا شود را به صورت دو مقدار افقی و عمودی در مقابل پرانتز متد translate تعیین کنید . برای این منظور معمولا از واحدهایی مثل px یا pt استفاده می شود .

با استفاده از متد translate() المنت مورد نظر شما از مکان فعلی خود با استفاده از پارامتر هایی که به آن برای چپ (محور X) و بالا (محور Y) داده میشود حرکت میکند .

با استفاده از متد ()translate، می توان عناصر را نسبت به مکان جاریشان حرکت داد. میزان این حرکت به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (۱- فاصله از چپ ۲- فاصله از بالا )

شکل کلی استفاده از خاصیت translate  :

transform : translate ( value1 , value2 ) ; 

(translateX(dx

اگر تنها لازم باشد که شکل مورد نظر ما تنها در جهت محور x حرکت کند از دستور زیر استفاده می کنیم:

و اگر بخواهیم در حهت محور y حرکت کند باید از دستور زیر استفاده کنیم:

value1 : 

این پارامتر میزان اندازه ای که عنصر در جهت افقی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند .
تعیین این پارامتر اجباری است . 

value2 :

این پارامتر میزان اندازه ای که عنصر در جهت عمودی جابجا می شود را براساس واحدی مثل px با pt تعیین می کند .
تعیین این پارامتر اجباری است .

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

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

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

مثال : 

کد زیر شی را ۱۲پیکسل به طرف راست و ۳۰ پیکسل به سمت پایین سوق میدهد.برای بالا بردن و چپ بردن باید از مقادیر منفی استفاده کرد.

transform:translate(12px, 30px)

مقدار (translate(50px,100px المنت را به سمت راست ۵۰ پیکسل و به سمت پایین ۱۰۰ پیکسل جابجا می کند.

div 

{
transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-moz-transform: translate(50px,100px); 
-o-transform: translate(50px,100px); 
-ms-transform: translate(50px,100px); 
}

 

به عنوان مثال میخاهیم زمانیکه نشانگر موس بر روی شکل مربع رفت به اندازه ۲۰px به سمت راست و ۲۰px به سمت بالا در صفحه حر کت کند.برای اینکار از دستور زیر استفاده می کنیم.

QR Code For: transform در css متد translate

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.