Comment faire pivoter une image en Javascript ou en CSS

Je crée un jeu simple.

Je veux utiliser jQUERY pour faire pivoter les articulations en le faisant bouger. J’utilise .animate ( http://api.jquery.com/animate/ ) pour animer les propriétés CSS, mais s’il est également possible d’utiliser Javscript, je peux créer mon propre code personnalisé.

Plus TO-THE-POINT

Comment faire pivoter des images en CSS ou en Javascript? Je préfère les CSS mais javascript convient aussi.

S’il est impossible (ce dont je suis presque sûr mais je n’abandonne pas encore), existe-t-il un autre moyen possible de faire ce que j’essaie de faire sans créer un tas d’images distinctes, chacune ayant subi une rotation. Ou peut-on au moins me donner un exemple de site qui fait quelque chose de similaire.

EDIT: J’ai besoin de 1 propriété CSS (no -something: rotation (500deg);) qui fonctionne avec FireFox , Safari et Chrome car ce sont les seuls navigateurs avec lesquels je travaille vraiment.

Les navigateurs Firefox et Webkit prennent en charge une propriété CSS “transform” (“-webkit-transform”, “-moz-transform”). Ceux-ci peuvent faire toutes sortes de choses intéressantes. Il existe un outil IE très faible qui permet une rotation très limitée. Ce n’est donc pas vraiment une option pour quelque chose comme un jeu.

Voici une page de démonstration que j’ai réalisée pour une autre question de Stackoverflow il y a quelques jours: http://gutfullofbeer.net/compass.html

Certains navigateurs supportent ceci:

Faire pivoter cette image avec CSS

entrez la description de l'image ici

Comme indiqué dans l’image ci-dessus, 1) est une rotation de -90 degrés ou 270 degrés 2) est une rotation de +90 degrés et 3) est une rotation de 180 degrés.

Remarque: – Le quadrant contenant un carré bleu correspond à la position de l’image d’origine dans le navigateur Web lorsqu’il est affiché avec la balise img. C’est la seule section visible par le développeur dans le navigateur Web. Lors de la rotation de l’image à partir de son point en haut à gauche, il passe au quadrant invisible. Il est donc très important d’utiliser les propriétés translateX et translateY avec la propriété rotation dans css pour faire glisser l’image du quadrant invisible au quadrant visible afin de l’afficher sur un navigateur Web. Veuillez vous référer à la propriété de transformation css pour plus d’informations.

Le css pour le même est comme ci-dessous

.image_rotate_270 { transform-origin: top left; /* IE 10+, Firefox, etc. */ -webkit-transform-origin: top left; /* Chrome */ -ms-transform-origin: top left; /* IE 9 */ transform: rotate(270deg) translateX(-100%); -webkit-transform: rotate(270deg) translateX(-100%); -ms-transform: rotate(270deg) translateX(-100%); } .image_rotate_90 { transform-origin: top left; /* IE 10+, Firefox, etc. */ -webkit-transform-origin: top left; /* Chrome */ -ms-transform-origin: top left; /* IE 9 */ transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); -ms-transform: rotate(90deg) translateY(-100%); } .image_rotate_180 { transform-origin: top left; /* IE 10+, Firefox, etc. */ -webkit-transform-origin: top left; /* Chrome */ -ms-transform-origin: top left; /* IE 9 */ transform: rotate(180deg) translateX(-100%) translateY(-100%); -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%); -ms-transform: rotate(180deg) translateX(-100%) translateY(-100%); }

Maintenant, utilisez ces noms de classe dans la propriété class de la balise img.

Pour une rotation de -90 à +90, vous devrez parfois modifier la hauteur et la largeur de l’écran avec la résolution de l’écran ou avec la résolution de l’image d’origine afin que l’image conserve sa forme d’origine. Faites-le en utilisant javascript dans la balise body après le chargement de l’image.

Supposons que votre image d’origine ait une résolution de 640 x 480. c’est-à-dire largeur = 480 et hauteur = 640. Ainsi, lorsque vous faites pivoter l’image, celle-ci devient une image avec une résolution de 480 X 640. Donc, pour conserver sa forme d’origine. Vous pouvez effectuer les opérations suivantes sous la balise body après l’image chargée.

Pas une réponse complète, mais au cas où cela serait utile, voici un petit bookmarklet amusant que j’ai dans Safari (qui fonctionne également en chrome) et qui provoquera la rotation du contenu de la page:

 javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());

J’ai pensé qu’il pourrait être utile de voir un exemple d’utilisation.

Pas idéal, mais vous pouvez créer des fichiers image distincts pour chaque état pivoté de l’image, puis utilisez JavaScript pour changer ou CSS pour changer d’ background-image: url('https://stackoverflow.com/questions/2367595/how-do-i-rotate-an-image-in-javascript-or-css/XXX'); Une fois les images chargées (vous pouvez même les pré-charger avec JS), l’animation entre elles devrait être très rapide.

Avez-vous déjà essayé: http://jqueryrotate.com/ ??

Fonctionne très bien dans tous les navigateurs modernes, y compris IE> = 6