transformation Reproduire css3 avec jquery
-
27-10-2019 - |
Question
salut est-il quelqu'un peut me montrer ho de reproduire cet effet avec CSS3 jquery en utilisant un certain retard / vitesse d'animation?
.element:hover{
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:9999;
}
La solution
Voici quelque chose assez proche de ce que vous demandez. Je sûr que vous pourriez ruser suis à votre goût
$('.element').hover(function(){
$(this).css('position','relative').animate({
height: $(this).height()*1.3,
width: $(this).width()*1.3,
left: '-=' + $(this).width() /4,
top: '-=' + $(this).height() /4,
'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px'
},'fast');
},
function() {
$(this).css('position','relative').animate({
height: $(this).height()/1.3,
width: $(this).width()/1.3,
left: 0,
top: 0,
'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) / 1.3 + 'px'
},'fast');
}
);
Autres conseils
Voici comment je pourrais aller sur la mise en œuvre d'une rotation simple (ne prenant pas la fréquence d'images en compte):
$(function(){
(function(n){
this.interval = n;
this.transform = {
'rotation': 0
};
this.start = function(){
setInterval(this.update, this.interval);
};
this.update = function(){
this.transform['rotation'] = (this.transform.rotation + 10) % 360;
$('div').css('transform', 'rotate(' + this.transform.rotation + 'deg)');
};
return this;
})(30).start();
});
http://jsfiddle.net/dbrecht/82aUL/1/
Ceci démontre une animation simple. Vous devriez être en mesure de comprendre comment mettre le reste ensemble.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow