اول نیاز به چیزی داریم که برامون نمایش بده و کاری کنیم که بپرخه. همونطور که گفتین ما از کد عکس استفاده میکنیم که به صورت زیر هست.
<img src="linkaks" width="100" />
حالا باید بهش یه کلاس بدیم و در داخل تگ استایل دوحالت معمولی و حرکت موس تعریف کنیم. ما از نام کلاس im استفاده میکنیم ولی شما هرچی خواستید(البته نام های مجاز) میتونید استفاده کنید.
<style>
.im{
}
.im:hover{
}
</style>
<img src="linkaks" width="100" class="im" />
حالا بهش استایلی میدیم که وقتی موس رفت روش بچرخه (حالت عادی 0درجه و زمانی که موس روش میره 360 درجه بچرخه.)
<style>
.im{
transform: rotate(0deg);
}
.im:hover{
transform: rotate(360deg);
}
</style>
<img src="linkaks" width="100" class="im" />
حالا این کد رو اگه تست کنید میبینید که به درستی کار میکنه (البته به خاظر این که 360 درجه میچرخه و به صورت آنی هست باید یکی از اعداد رو کمتر یا زیاد تر کنید.)
حالا یه سری کد دیگه بهش اضافه میکنید که به صورت آنی نچرخه(چرخش به چشم بیاد)(برای کمتر کردن سرعت اعداد 3 رو کم کنید و برای بیشتر کردن سرعت اعداد 3 رو بیشتر کنید/ اعداد ممیزی هم قبول میکنه)
<style>
.im{
transform: rotate(0deg);-moz-transition:all 3s ease;-o-transition:all 3s ease;-khtml-transition:all 3s ease;-webkit-transition:all 3s ease;transition:all 3s ease;
}
.im:hover{
transform: rotate(360deg);
}
</style>
<img src="linkaks" width="100" class="im" />