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

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

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

حتما بخوانید : انتقال وردپرس از لوکال هاست به هاست

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

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

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

حتما بخوانید : رفع مشکل قرار دادن رمز بر روی wp-admin

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

.parswp-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;
}

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

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

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

.parswp-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;
}

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

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

حتما بخوانید : پشتیبانی از ویژگی Instant Article در وردپرس

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

.parswp-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);
}

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

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