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

من خلال خصائص 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