CSS transform: rotate ne fonctionne que sur l'image

J'ai ce code:

<html> <head> <script type = "text/javascript" src = "jquery-1.7.1.js"></script> <script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script> </head> <body> <div id = "div" onclick = "Rotate()"> <img src="image.png" height="40" width="160"> </div> <script type="text/javascript"> var x = 1; function Rotate() { var angle = (90 * x); $("div").css("-moz-transform", "rotate(" + angle + "deg)"); x++; }</scipt></body></html>

Lorsque vous utilisez le script Rotate() , le div semble être tourné, mais lorsque vous l'avez vu avec Firebug, je vois que div est toujours dans la même position. Est-ce que je fais quelque chose qui ne va pas ou que j'utilise une mauvaise chose pour la tâche que j'essaie d'accomplir?

Modifier:

Merci pour les réponses! J'ai mis l'arrière-plan en jaune et il a tourné la boîte jaune, mais en cliquant sur le nom de div dans Firebug, cela montre que le div est toujours dans sa position d'origine. Lightblue est la position originale du div

Il est définitivement appliqué au <div> . Ajoutez simplement une largeur et une couleur de fond à la div pour voir que cela fonctionne correctement.

Voici un exemple que j'ai jeté ensemble qui tourne autour:

HTML:

 <div id="awesome"> <img src="/img/logo.png"> </div>

CSS:

 body { margin: 100px; } div { background: blue; width: 200px; -webkit-transition: all ease-in 1s; -moz-transition: all ease-in 1s; transition: all ease-in 1s; } div:hover { background: yellow; -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }

Voici un peu plus d' informations sur l'utilisation de la propriété transformation css3

Il y a un plugin jQuery que j'ai trouvé qui a un exemple de faire exactement ce que vous faites, mais de manière croisée. Consultez: https://github.com/heygrady/transform

Ce plugin vous permet de faire des choses comme ceci:

 $('div').click(function() { $(this).animate({rotate: '+=45deg'}); });

Modifier:

Hé, voici une version légèrement nettoyée de votre original qui fonctionne bien:

 var x = 1; $("#box").click(rotate); function rotate() { var angle = (90 * x); $(this).css("-moz-transform", "rotate(" + angle + "deg)"); x++; if (x > 4) x = 0; }

http://jsfiddle.net/UdYKb/1/

La raison pour laquelle firebug ne montre pas le changement est dû à la spécification, qui dit: "la propriété transform n'affecte pas le flux du contenu entourant l'élément transformé". http://dev.w3.org/csswg/css3-transforms/

Regardez cet exemple avec 3 photos en rotation

HTML:

 <div id = "div"> <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> </div>

JAVASCRIPT:

 $().ready(function() { $(".rp").click(function() { var rot = (parseInt($(this).attr("data-rotate"))+90)%360; $(this).attr("data-rotate",rot); $(this).css("-webkit-transform", "rotate("+rot+"deg)"); $(this).css("-moz-transform", "rotate("+rot+"deg)"); }); });

I Enregistrer la dernière rotation dans l'attribut de data-rotate . Veuillez lire à propos des sélecteurs CSS si vous ne comprenez pas pourquoi utiliser .rp 🙂 J'espère que cela vous aidera.

PS: J'ai utilisé l'attribut css Google Chrome -webkit-transform aussi 🙂