no-img
اِمیلاسلام کاربر مهمان. امروز دوشنبه ۲۷ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۱۲ تیر ۱۳۹۸،
138 روز پیش
افکت چرخش تصویر هنگام رفتن ماوس روی آن
امتیاز 5.00 ( 6 رای )
حمایت از emila.ir

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

انتشار؛ ۱۲ تیر ۱۳۹۸ - 138 روز پیش

در این آموزش از 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);
}

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

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

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


موضوع : وب/ برچسب : , , , , / لینک کوتاه : https://emila.ir/?p=16897
designer