افکت چرخش عکس با Css

سایت هایی هستند که وقتی موس را روی عکس میبری، اون عکس 180 درجه میچرخه.

شاید واستون جالب اومده باشه و بخوایید شما هم عکس ها و تصاویر سایتتون را وقتی موس بازدیدکننده میره روی تصویر  180 درجه بچرخونید !!!

اینکار توسط rotate در css امکان پذیر است.

به طوریکه شما ابتدا ثانیه چرخش رو مشخص میکنید و بعد هم اندازه چرخش رو به کلاس استایلتون میدید.

جهت انجام اینکار، ابتدا یک کلاس برای عکس های خود در فایل های style یا css ایجاد کنید.

اگر عکس های شما کلاس دارند نیازی به دوباره ایجاد کردن کلاس نیست.

ابتدا کدهای زیر را در کلاس مورد نظر خود قرار دهید :

.class-images
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

سپس برای کلاس مورد نظر خود یک hover ایجاد کنید مانند کد زیر :

.class-images:hover
{
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

کار تمام است. دموی این کد رو هم میتونید در همین وب با بردن موس خود بر روی تصاویر پست های سایت مشاهده کنید.