Transformer en jQuery

J’essaie d’obtenir un élément pour animer un effet de survol de rotation à l’aide de jQuery. J’ai jsFiddle à tester. Jusqu’ici j’ai ceci:

$(".icon").hover(function() { $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400); },function() { $(this).stop().animate({backgroundColor : "black", color: "red"},400); }); 

Mais il ne semble pas y avoir de rotation du tout, je me rends compte que la bonne façon de régler le css est la suivante:

-webkit-transform: rotation (30deg);

J’ai essayé ceci:

 $(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400); 

mais alors même la hauteur ne change pas. tout conseil aiderait merci!

Lien vers le JSFiddle

    Utilisez l’excellent plugin jQuery Rotate. http://code.google.com/p/jqueryrotate/ . Il est supporté par tous les principaux navigateurs

     * Internet Explorer 6.0 > * Firefox 2.0 > * Safari 3 > * Opera 9 > * Google Chrome 

    Pour faire pivoter une image, il vous suffit de faire $('#myImage').rotate(30) //for a 30 degree rotation#myImage est l’id de l’élément que vous voulez faire pivoter.

    Pour animer la rotation, vous pouvez utiliser setTmeout ex:

     setTimeout(function() { $('#myImage').rotate(30) },5) 

    Hormis IE9, tous les navigateurs prenant en charge la transformation prennent également en charge la transition. Vous feriez donc mieux de le faire sans JS, comme ceci:

     .icon { -webkit-transition:all 400ms; -moz-transition:all 400ms; transition:all 400ms; display:block; width:100px; height:100px; background-color:red } .icon:hover { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg) } 

    Exemple: http://jsfiddle.net/9CYET/14/

    (Je sais que ce ne sont pas toutes les propriétés que vous souhaitiez, mais vous avez une idée! Si vous souhaitez également modifier la hauteur, vous devez définir l’origine de la transformation au bon endroit).

    Dans IE9, la rotation sera effectuée sans animation et dans les anciens navigateurs, rien ne se passera. Vous pouvez également utiliser les filtres pour IE afin d’obtenir une rotation dans les très vieux IE.

    Le meilleur plugin jquery pour appliquer la transformation CSS à travers le navigateur est jquery transform . Il peut également faire des animations et est disponible sur Github avec une documentation détaillée.

    La publication est probablement un peu obsolète, mais vous n’avez pas besoin d’un plugin supplémentaire (c’est si vous ne souhaitez pas supporter IE 8 et les versions antérieures). Je l’ai réglé de la manière suivante:

    1 ) Dans le CSS du HTML, définissez le temps de transformation:

     .element { -webkit-transition: 0.3s; transition: 0.3s; } 

    Ensuite, dans votre script, faites:

     $(".element").css("-webkit-transform", "rotateY(90deg)"); $(".element").css("transform", "rotateY(90deg)"); 

    Cela a fonctionné pour moi dans Chrome, Firefox et Safari, je ne l’ai pas testé IE, mais cela devrait fonctionner dans IE9 et les versions ultérieures.

    jQuery animate ne prend pas en charge la rotation (voir http://bugs.jquery.com/ticket/4171 et la documentation de jQuery )

    De plus, seuls les CSS avec des valeurs numériques sont pris en charge pour animer, ce qui signifie que les couleurs d’animation ne fonctionneront pas non plus. Petit problème … jQuery UI n’a pas pris en charge le support des couleurs.

    Si vous voulez animer quelque chose en css, il vous suffit de définir la propriété css “transitionDuration” (inutile de jQuery.animate), par exemple:

     var style = element.style; style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms'; style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)'; style.msTransform = style.OTransform = 'translateX(100px)'; 

    Cependant, cela ne fonctionnera que sur les navigateurs modernes, vous devez donc utiliser jQuery.animate comme solution de secours.

    Voici le plugin jQuery qui gère ceci:

    https://github.com/benbarnett/jQuery-Animate-Enhanced

    Il remplace simplement la fonction jQuery.animate pour utiliser l’animation CSS si disponible. Vous n’avez donc pas à vous soucier des problèmes de navigation entre les navigateurs. Appelez simplement jQuery.animate et la meilleure méthode disponible sera appelée.

    J’ai utilisé ceci pour la balance:

     var zoom_level = .4, multiplier = .2; $('button.zoom-in, button.zoom-out').click(function(){ zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier); $('.floor').css({ '-webkit-transform': 'scale(' + zoom_level + ')' }); }); 

    Si vous utilisez jquery, jquery.transit est une lib très simple et puissante qui vous permet d’effectuer votre transformation tout en gérant la compatibilité entre navigateurs. Cela peut être aussi simple que cela: $ (“# élément”). Transition ({x: ’90px’}). Prenez-le à partir de ce lien: http://ricostacruz.com/jquery.transit/

    jquery.transform.js est un plugin de transformation jquery 2d développé par Louis remi. cela permet d’utiliser transform comme css dans jQuery. visitez ce lien pour des illustrations sur son utilisation. Une illustration simple pour faire pivoter un élément à l’aide de ce plugin est la suivante:

     $(elem).animate({transform: 'rotate(135deg)'});