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