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

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

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

 

ساختار HTML

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

 

چرخش ۳۶۰ درجه بدون بازگشت

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

 

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

 

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

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

[ad_2]

لینک منبع مطلب