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

تغییر وضعیت نمایش عناصر در CSS 3 - خاصیت transform :

به وسیله خاصیت transform در CSS 3 ، شما می توانید وضعیت نمایش عنصر مورد نظر خود را به صورت 2 بعدی یا 3 بعدی تغییر دهید .
به وسیله متدهای خاصیت transform ، شما می توانید عناصر مورد نظر خود را چرخانده ، بزرگ یا کوچک کرده ، حرکت داده و یا تبدیل نمایید .
این متدها ، افکت های تصویری بسیار زیبا و متنوعی را در اختیار طراحان وب قرار می دهند که تمامی آنها با نوشتن یک کد ساده امکان پذیر خواهند بود . مطمننا تا قبل از این ، طراحان وب برای انجام این امور ، نیاز به استفاده از ترفندها و یا برنامه های جانبی مختلفی بودند .
شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax transform : effect ( ) ;
مثال : transform : rotate ( 90deg ) ;

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر تعیین کننده نوع متدی است که خاصیت به وسیله آن ، وضعیت نمایش عنصر مورد نظر را تغییر می دهد . به وسیله این متدها می توانید عنصر مورد نظر خود را چرخانده ، برعکس کرده ، بزرگ یا کوچک نموده و یا تبدیل کنید .
این پارامتر می تواند یکی از مقادیر زیر را داشته باشد . برای دریافت اطلاعات راجع به هر کدام ، به بخش معرفی متدهای خاصیت transform در بخش پایین صفحه بروید :
  • ( ) translate
  • ( ) rotate
  • ( ) scale
  • ( ) skew
effect ( )


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

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

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


متدهای خاصیت transform :

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

نام متد شرح
translate ( ) به وسیله این متد می توانید عنصر مورد نظر را کپی کرده و به یک نقطه دیگر منتقل نمایید .
rotate ( ) به وسیله این متد می توانید عنصر مورد نظر را در جهت های مختلف بچرخانید .
scale ( ) به وسیله این متد می توانید اندازه عنصر مورد نظر را تغییر داده و بزرگ یا کوچک نمایید .
skew ( ) به وسیله این متد می توانید عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید .


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


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

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟