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

آموزش CSS 3 - تغییر وضعیت عناصر - متد translate

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

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

Syntax transform : translate ( value1 , value2 ) ;
مثال : transform : translate ( 90px , 80px ) ;

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

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

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

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

مثال عملی :

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

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

حالت 2 - تغییر مکان عکس به یک نقطه دوم
< img src="../Pic/ADS/css.png" style="-ms-transform: translate(20px,30px); /* ie 9 */     -webkit-transform: translate(20px,30px); /* chrome */     -o-transform: translate(20px,30px); /* opera */     -moz-transform: translate(20px,30px); /* firefox */"     /> کد
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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