no-img

اِمیلا افکت چرخش تصویر هنگام رفتن ماوس روی آن
اِمیلا
ترفند وب افکت چرخش تصویر هنگام رفتن ماوس روی آن
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

منتشر شده در سه شنبه 25 تیر 1398، 12 روز پیش
افکت چرخش تصویر هنگام رفتن ماوس روی آن
امتیاز 5.00 ( 6 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

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

منتشر شده در سه شنبه 25 تیر 1398، 12 روز پیش
97
milipinkman

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

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

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

.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;
}
 
.img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

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

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

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

.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;
}
.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 درجه بدون بازگشت

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

در این حالت از استایل زیر استفاده می کنیم:

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

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

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

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

designer
emila.ir QR-code
موضوع : وب
برچسب : , , , ,
لینک کوتاه مطلب : https://emila.ir/?p=16897
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

درباره نویسنده

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک به ما  -  ارسال ایمیل به ما
IP شما: 54.172.234.236