آموزش ایجاد افکت چرخش تصویر هنگام رفتن ماوس روی آن

آخرین بروزرسانی 11 تیر 1401

چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را مرور کنیم و ببینیم که چطور میتوان کاری کرد که در هنگام قرار گرفتن ماوس بر روی یک تصویر دلخواه، تصویر مورد نظر به اندازه ای از پیش تعریف شده بچرخد. از شما دعوت میکنیم در آموزش امروز با مسترکد همراه شوید. از مقدمه چینی بیشتر پرهیز میکنیم و یک راست به سراغ پیاده سازی افکت چرخش تصاویر در CSS میرویم.

ساختار HTML

ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. به کد زیر دقت کنید :

<p class="mrcode-rotate">
	<a href="https://mrcode.ir/">
		<img border="0" src="image.png" />
	</a>
</p>

</a>

</p>

همانطور که مشاهده میکنید یک در برگیرنده (در اینجا تگ p) داریم که کلاس mrcode-rotate به آن نسبت داده شده. شما میتوانید در اینجا بجای تگ p از div یا هر تگ دیگری که مد نظر شماست استفاده کنید. درون این تگ، یک لینک و درون لینک نیز یک تصویر قرار داده ایم. بدیهی است که قرار دادن تگ a الزامی نیست و تصویر شما میتواند فاقد لینک باشد. بنابراین بر اساس توضیحات ارائه شده، میتوانید کد بالا را به دلخواه خود تغییر دهید. تنها بخش حائز اهمیت این است که تصویر مورد نظر شما درون یک در بر گیرنده با کلاس mrcode-rotate قرار گرفته باشد تا CSS ای که در ادامه درج میشود به درستی برای شما کار کند. کد های CSS را جهت سادگی کار شما به سه بخش تقسیم کرده ایم که به دلخواه خود میتوانید از کدی که با نیاز شما سازگار تر باشد استفاده کنید.

چرخش 360 درجه تصویر به همراه بازگشت

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

.mrcode-rotate img {
	-moz-transition: all 0.8s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.mrcode-rotate img:hover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

.mrcode-rotate img {

-moz-transition: all 0.8s ease-in-out;

-webkit-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

.mrcode-rotate img:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

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

چرخش 60 درجه تصویر به همراه بازگشت

خوب، حالا شاید مایل نباشید تصویر را یک دور کامل بچرخانید و تنها مایل باشید تصویر اندکی به سمت مورد نظر بچرخد. مثلا با استفاده از کد های زیر تصمیم داریم تصویر را تنها 60 درجه چرخانده و در صورت خروج ماوس به حالت اولیه بازگردانیم :

.mrcode-rotate img {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.mrcode-rotate img:hover {
	-moz-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

.mrcode-rotate img {

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.mrcode-rotate img:hover {

-moz-transform: rotate(60deg);

-webkit-transform: rotate(60deg);

-o-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

}

بدیهی است که شما میتوانید هر درجه ای که مایل هستید را بجای عدد 60 قرار دهید تا تصویر دقیقا به همان مقدار به جهت مورد نظر شما مایل شود. توجه داشته باشید که درجه در 5 خط متفاوت تعریف شده، بنابراین برای رسیدن به نتیجه ی مناسب باید درجه را در هر 5 جا تغییر دهید.

چرخش 360 درجه بدون بازگشت

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

.mrcode-rotate img:hover{ 
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

.mrcode-rotate img:hover{

-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

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

برای ساده تر شدن کار شما و امکان مشاهده نتایج کد هایی که در بالا درج شده اند، یک پک دمو برایتان آماده کرده ایم که هر سه افکت بالا را به خوبی به نمایش میگذارد.

دریافت فایل دمو چرخش تصویر

امیدواریم از آموزش امروز لذت برده باشید.
راستی اگر مایلید مسترکد به شما افکت CSS خاصی را آموزش دهد، فراموش نکنید که آن را در بخش نظرات با ما در میان بگذارید.

دسترسی آسان به این مطلب لینک کوتاه :

10 دیدگاه

قالب فلزی می گوید 9 سال پیش
ممنون. جالب بود
پاسخ
پدرام می گوید 8 سال پیش
عالی بود مرسی
پاسخ
محسن می گوید 7 سال پیش
سلام، وقت به خیر
من یه نمونه از چرخش لوگو دارم، می خوام لوگوی سایتم مثل این نمونه بشه:
#
یعنی با باز شدن صفحه سایت و هر بار هم که رفرش میشه یه بار بچرخه.
آدرس سایتم اینه:
#
کد css سایت نمونه رو هم توی استایل گذاشتم، ولی کار نمی کنه! آیا کار دیگه ای هم لازمه؟
ممنون میشم بفرمایین چه کدی رو باید بذارم، چند تا کد تست کردم ولی نشد.
تشکر
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  آموزشی که در اینجا درج کردیم، تصویر رو در زمان قرار گرفتن ماوس به چرخش در میاره و وابستگی ای به لود صفحه یا رفرش نداره.
  پاسخ
  1. محمد می گوید 5 سال پیش
    من یک سوال دارم که باید تماس بگیرم. امکانش هست؟
مهدی می گوید 6 سال پیش
سلام،اون کد css رو دقیقا باید کجا وارد کرد؟
پاسخ
1. MrCode می گوید 6 سال پیش
  سلام
  هر جایی که فایل استایلتون قرار داره.
  پاسخ
امیرحسین آقاجانی می گوید 5 سال پیش
سلام. ممنون از آموزش خوبتون!
چطوری میشه یه کاری کرد که کلا در حال چرخش باشه ؟
با سپاس
پاسخ
حامد ارجمند می گوید 4 سال پیش
این کد رو تو SCC خود عکس باید کپی کنیم یا جای دیگه؟ من کپی کردم کار نکرد
پاسخ
daarc می گوید 4 سال پیش
عالی بود مرسی
پاسخ

صفحه 1 از 1

ارسال پاسخ