آیا میدانید 99 درصد ایردارپ های غیر رایگان جعلی و کلاهبرداری هستند! پس لطفا گول نخورید. پولدار شدن یک شبه خیالی خام و رویایی بیش نیست و میسر نمیشود به این جمله ایمان بیاورید.

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

در این آموزش از digital98 چرخش تصویر با استفاده از 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);
}

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

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

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

مطالب مرتبط ؛

  • به کانال ارز دیجیتال رایگان بپیوندید کانال ارز دیجیتال

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

    نشانی ایمیل شما منتشر نخواهد شد.

    بدون دیدگاه
    وبلاگ
    © 2021 - کلیه حقوق برای دیجیتال 98 محفوظ است