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

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

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

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

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

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، بر حسب درجه چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است . 		deg

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

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

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

مثال عملی :

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

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

حالت 2 - چرخش به میزان 90 درجه در جهت عقربه های ساعت
< img src="../Pic/ADS/css.png" style="-ms-transform: rotate( 90deg ); /* ie 9 */     -webkit-transform: rotate( 90deg ); /* chrome */     -o-transform: rotate( 90deg ); /* opera */     -moz-transform: rotate( 90deg ); /* firefox */"     /> کد
خروجی

حالت 3 - چرخش به میزان 45 درجه در جهت خلاف عقربه های ساعت
< img src="../Pic/ADS/css.png" style="-ms-transform: rotate( -45deg ); /* ie 9 */     -webkit-transform: rotate( -45deg ); /* chrome */     -o-transform: rotate( -45deg ); /* opera */     -moz-transform: rotate( -45deg ); /* firefox */"     /> کد
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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