السلام عليكم..حاولت كثيرا وبحثت طريقة تدوير صورة 360 ب jQuery لكن لم أجد حلا..أرجو المساعدة
كيف أدير صورة 360 درجة ب JQuery rotate
بإستخدام 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);
}
صديقي 360 درجة لن تُغيّر الصورة وستَبقى كما هي كانك تَدور ثم تعود إلى مكانك ! وأعتقد هذا سبب فشل محاولاتك هل تقصد 180 درجة ؟
من خلال خصائص 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
التعليقات