0

كيف أدير صورة 360 درجة ب JQuery rotate

السلام عليكم..حاولت كثيرا وبحثت طريقة تدوير صورة 360 ب jQuery لكن لم أجد حلا..أرجو المساعدة

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
ahmedsaoud31 أضف ردا

بإستخدام jQuery:

$(function(){
    var degree;
    $('#image').hover(function(){
        degree = 180;
        $(this).css({'transform' : 'rotate('+degree+'deg)'});
    },function(){
        degree = 0;
        $(this).css({'transform' : 'rotate('+degree+'deg)'});
    });
});

من خلال CSS فقط:

#image:hover{
    transform: rotate(180deg);
}
0
supercoder أضف ردا

صديقي 360 درجة لن تُغيّر الصورة وستَبقى كما هي كانك تَدور ثم تعود إلى مكانك ! وأعتقد هذا سبب فشل محاولاتك هل تقصد 180 درجة ؟

0
AhmedSaieed أضف ردا

اخي لا تفرق بالنسبة لي 360 ام 180 المهم حركة تحريك النيميشن اما المستخدم عند وضع الماوس علي الصورة فكيف انفذ هذا ؟

0
AhmedSaieed أضف ردا

الانيميشن

0
AhmedSaieed أضف ردا

الف شكر يا شباب

0
AhmedSaieed أضف ردا

كيف أقدر أتحكم بالسرعة عند الدوران ؟

0
ahmedsaoud31 أضف ردا

من خلال خصائص CSS عبر keyframes@ كالتالي:

#image{
    cursor: pointer;
    animation: imageRotateOut 1s;
    animation-fill-mode: forwards;
}
#image:hover{
    animation: imageRotateIn 1s;
    animation-fill-mode: forwards;
}
@keyframes imageRotateIn
{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}
@keyframes imageRotateOut
{
    from {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(0deg);
    }
}

ملاحظة: راجع كيفية دعم المتصفحات لخصائص keyframes@ و الـ transform