دوران الصورة المنشط بالتمرير

يمكن أن يؤدي دمج السلوك الديناميكي في صفحات الويب الخاصة بك، مثل تدوير الصور عند التمرير، إلى تعزيز تفاعل المستخدم. لتحقيق هذا التأثير باستخدام CSS على صورة ذات حدود دائرية، اتبع الخطوات التالية:

1. انتقالات CSS3 مع التدوير ()

استخدم انتقالات CSS3 لتدوير الصورة بسلاسة عند التمرير. تحدد خاصية الانتقال المدة ووظيفة التخفيف للرسوم المتحركة. في هذه الحالة، قمنا بضبط مدة الانتقال على 0.7 ثانية ونحدد وظيفة تسهيل الدخول والخروج.

img {
  transition: transform .7s ease-in-out;
}

2. تحويل التحويم

لتدوير الصورة عند التمرير، نستخدم خاصية التحويل مع وظيفة التدوير () لتعيين زاوية التدوير المطلوبة. في هذا المثال، نقوم بتدوير الصورة 360 درجة.

img:hover {
  transform: rotate(360deg);
}

3. تنفيذ HTML

ضمن كود HTML الخاص بك، ضع عنصر صورة بالمصدر والحجم المناسبين.

نموذج التعليمات البرمجية

إليك نموذج تعليمات برمجية كامل يوضح تأثير الصورة الدوارة:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

باستخدام هذا الرمز، عندما يقوم المستخدم بالتمرير فوق الصورة، سيتم تدويرها 360 درجة بسلاسة.