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