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

در ابتدا باید متن یا تصویری که می‌خواهید به چرخش در بیاید را انتخاب نمائید

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

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

 


<style type="text/css">

.rotate:hover{
-moz-transform:rotate(360deg);-moz-transition:600ms ease-in;
-ms-transform:rotate(360deg);-ms-transition:600ms ease-in;
-webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in;
-o-transform:rotate(360deg);-o-transition:600ms ease-in;
}
</style>


 

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

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

دستور ratate :

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

دستور transition :

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

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