چرخش تصاویر در Css3

 

امروز قصد داریم یک بخشی از آموزش CSS3 رو برای شما قرار بدهیم ، در این مطلب یاد خواهید گرفت که یک متن ، تصویر و... ای را به چرخش در آورید ...

در ابتدا باید متن یا تصویری که می خواهید به چرخش در بیاید را انتخاب نمائید ، ما در این قسمت 4 عکس  را مورد انتخاب قرار داده ایم :

 

firefox2 چرخش تصاویر در CSS3chrome2 چرخش تصاویر در CSS3ie2 چرخش تصاویر در CSS3rss2 چرخش تصاویر در CSS3

 

حال وقت کد نویسی است :

 

در ابتدا در بخش STYLE خود یک کلاس با نام rotate ایجاد نمائید :

 

1 <style type="text/css">
2  
3 .rotate:hover{
4 -moz-transform:rotate(360deg);-moz-transition:600ms ease-in;
5 -ms-transform:rotate(360deg);-ms-transition:600ms ease-in;
6 -webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in;
7 -o-transform:rotate(360deg);-o-transition:600ms ease-in;
8 }
9 </style>

 

در کد فوق در ابتدا ما کلاس rotate را به صورت hover تعریف کرده ایم ، یعنی وقتی عملی رخ دهد که اشاره ماوس روی آن قرار گیرد ، در قسمت های بعدی لازم است چهار مقدار را در ابتدا توضیح دهیم :

 

  • moz-transform : این دستور برای اجرا شدن در مرورگر فایرفاکس می باشد.
  • ms-transform : این دستور برای اجرا شدن در مرورگر اینترنت اکسپلورر می باشد.
  • webkit-transform : این دستور برای اجرا شدن در مرورگرهای webkit همانند سافاری می باشد.
  • o-transform : این دستور نیز برای اجرا شدن در مرورگر opera می باشد.

 

نکته : این دستورات در css3 به صورت قرار دادی برای انواع مرورگرها تعریف شده اند.

 

دستور ratate :

 

دستور rotate ، درجه چرخش را مشخص می کند ، همانطور که در کد بالا مشاهده می نمائید ، ما از 360deg( یعنی 360 درجه) استفاده نموده ایم.

 

دستور transition :

 

این دستور برای مشخص کردن سرعت چرخش می باشد که بر حسب میلی ثانیه می باشد ، ما در این قسمت آن را برابر با 600 قرار داده ایم ، همچنین مقدار ease in که یکی از پارامترهای دستور transition می باشد ، ease in باعث شروع چرخش به صورت آهسته می شود.

 

کد اجرا و فراخوانی کلاس :

 

1 <img width="55" height="55" border="0" src="http://www.7learn.com/wp-content/uploads/rss2.png"class="rotate" />
2 <img width="55" height="55" border="0" src="http://www.7learn.com/wp-content/uploads/chrome2.png"class="rotate" />
3 <img width="55" height="55" border="0" src="http://www.7learn.com/wp-content/uploads/ie2.png"class="rotate" />
4 <img width="55" height="55"  src="http://www.7learn.com/wp-content/uploads/firefox2.png"class="rotate" />

برای مشاهده خروجی کلیک نمائید

ارسال نظر