Перемещение изображения на стол - CSS

Question

У меня есть список изображений, отображаемых на моей веб-странице, и теперь мне нужно установить разные переходы для всего изображения, то есть когда я наводил на изображение, он должен показывать один переход и для второго время парения он должен показать еще один переход Так что мой вопрос заключается в том, чтобы установить случайный trasnsition для одного изображения на парении с помощью CSS

Answer 1

я надеюсь, что это поможет ...

$('.photo').hover(function() { 
    var a = Math.random() * 10 - 5; 
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)'); 
}, function() { 
    $(this).css('transform', 'none'); 
}); 

Answer 2

Вы не можете установить случайный но вы можете достичь через имена классов diff.

.transition1 { 
/* transition1 css properties goes here*/ 
} 
.transition2 { 
/* transition2 css properties goes here*/ 
} 

Это может быть достигнуто с событием JQuery наведении курсора мыши:

• Инициализировать переменную с 0;
• Приращение при наведении курсора мыши триггеров событий.
• Удалите старое имя класса и добавьте новое имя класса.

var n = 0; 
$('.image') 
    .mouseenter(function() { 
    n = n + 1; 
    $(this).addClass('transition'+n); 
    }) 
    .mouseleave(function() { 
    $(this).removeClass('transition'+n); 
    }); 

Приведенный выше код JQuery добавит новые имена классов на MouseEnter событий. Вы можете установить несколько свойств перехода с помощью этого кода.