آموزش ایجاد افکت چرخش تصویر هنگام رفتن ماوس روی آن
چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را مرور کنیم و ببینیم که چطور میتوان کاری کرد که در هنگام قرار گرفتن ماوس بر روی یک تصویر دلخواه، تصویر مورد نظر به اندازه ای از پیش تعریف شده بچرخد. از شما دعوت میکنیم در آموزش امروز با مسترکد همراه شوید. از مقدمه چینی بیشتر پرهیز میکنیم و یک راست به سراغ پیاده سازی افکت چرخش تصاویر در CSS میرویم.
ساختار HTML
ساختار HTML ای که در اینجا مورد استفاده قرار داده ایم، بسیار ساده است. به کد زیر دقت کنید :
1 2 3 4 5 | <p class="mrcode-rotate"> <a href="https://mrcode.ir/"> <img border="0" src="image.png" /> </a> </p> |
همانطور که مشاهده میکنید یک در برگیرنده (در اینجا تگ p) داریم که کلاس mrcode-rotate به آن نسبت داده شده. شما میتوانید در اینجا بجای تگ p از div یا هر تگ دیگری که مد نظر شماست استفاده کنید. درون این تگ، یک لینک و درون لینک نیز یک تصویر قرار داده ایم. بدیهی است که قرار دادن تگ a الزامی نیست و تصویر شما میتواند فاقد لینک باشد. بنابراین بر اساس توضیحات ارائه شده، میتوانید کد بالا را به دلخواه خود تغییر دهید. تنها بخش حائز اهمیت این است که تصویر مورد نظر شما درون یک در بر گیرنده با کلاس mrcode-rotate قرار گرفته باشد تا CSS ای که در ادامه درج میشود به درستی برای شما کار کند. کد های CSS را جهت سادگی کار شما به سه بخش تقسیم کرده ایم که به دلخواه خود میتوانید از کدی که با نیاز شما سازگار تر باشد استفاده کنید.
چرخش 360 درجه تصویر به همراه بازگشت
در مرحله ی اول میخواهیم کاری کنیم که تصویر انتخابی ما، 360 درجه چرخیده و سپس به آرامی به جای اول خودش باز گردد. برای این کار از استایل های زیر استفاده میکنیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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 درجه چرخانده و در صورت خروج ماوس به حالت اولیه بازگردانیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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 درجه بدون بازگشت
در هر دو حالت قبلی، تصویر پس از چرخش، در صورتی که ماوس از روی آن برداشته میشد به حالت اولیه باز میگشت. حالا میخواهیم فرض کنیم که شاید مایل باشید تصویر پس از خارج شدن ماوس از روی آن، دیگر حرکت نکند. یعنی در صورت قرار گیری ماوس روی تصویر، چرخش انجام میشود ولی پس از برداشتن ماوس از روی تصویر، دیگر اتفاقی نخواهد افتاد. در این حالت از استایل زیر استفاده میکنیم :
1 2 3 4 5 6 7 8 9 10 11 12 | .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 خاصی را آموزش دهد، فراموش نکنید که آن را در بخش نظرات با ما در میان بگذارید.
ممنون. جالب بود
عالی بود مرسی
سلام، وقت به خیر
من یه نمونه از چرخش لوگو دارم، می خوام لوگوی سایتم مثل این نمونه بشه:
#
یعنی با باز شدن صفحه سایت و هر بار هم که رفرش میشه یه بار بچرخه.
آدرس سایتم اینه:
#
کد css سایت نمونه رو هم توی استایل گذاشتم، ولی کار نمی کنه! آیا کار دیگه ای هم لازمه؟
ممنون میشم بفرمایین چه کدی رو باید بذارم، چند تا کد تست کردم ولی نشد.
تشکر
سلام
آموزشی که در اینجا درج کردیم، تصویر رو در زمان قرار گرفتن ماوس به چرخش در میاره و وابستگی ای به لود صفحه یا رفرش نداره.
من یک سوال دارم که باید تماس بگیرم. امکانش هست؟
سلام،اون کد css رو دقیقا باید کجا وارد کرد؟
سلام
هر جایی که فایل استایلتون قرار داره.
سلام. ممنون از آموزش خوبتون!
چطوری میشه یه کاری کرد که کلا در حال چرخش باشه ؟
با سپاس
این کد رو تو SCC خود عکس باید کپی کنیم یا جای دیگه؟ من کپی کردم کار نکرد
عالی بود مرسی