Comment faire pivoter une image en Javascript ou CSS

Question

Je crée un jeu simple.

Je veux utiliser jQUERY pour faire tourner les joints en les 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-LE POINT

Comment puis-je faire pivoter les images en CSS ou Javascript? Je préfère CSS mais Javascript est bien aussi. Si c'est impossible (ce dont je suis sûr, mais je n'abandonne pas encore), y a-t-il une autre façon de faire ce que je veux faire sans faire un tas d'images séparées, chacune étant tournée différemment façon. Ou peut-on au moins me donner un exemple d'un site qui fait quelque chose de similaire.

EDIT: J'ai besoin 1 propriété CSS (pas -Quelque chose: rotation (500deg);) qui fonctionne avec FireFox, Safari et Chrome car ce sont les seuls navigateurs que je travaille vraiment avec.

Answer 1

Certains navigateurs prennent en charge ceci:

• Rotate That Image with CSS

Answer 2

Firefox et les navigateurs Webkit supportent une propriété CSS "transformer" ("-webkit transformée", "-moz-transform"). Ceux-ci peuvent faire toutes sortes de choses intéressantes. Il y a un outil IE très faible qui permet une rotation très limitée, donc ce n'est pas vraiment une option pour quelque chose comme un jeu.

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

Answer 3

Pas une réponse complète, mais dans le cas où il est utile est ici un peu bookmarklet amusant que j'ai dans Safari (fonctionne en chrome ainsi) cela entraînera 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.

Answer 4

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

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

Answer 5

Pas idéal, mais vous pouvez créer des fichiers d'image distincts pour chaque rotation état de l'image, puis utilisez JavaScript pour changer <img src="XXX" /> ou CSS pour changer background-image: url('XXX'); Une fois que la les images sont chargées (vous pouvez même les pré-charger avec JS), l'animation entre elles devrait être très rapide.

Answer 6

Comme le montre l'image ci-dessus 1) est de -90 degrés ou 270 degrés rotation 2) est 90 degrés de rotation et 3) est une rotation de 180 degrés.

Remarque: - Le quadrant contenant le carré bleu est 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 pour le développeur dans le navigateur Web. Lors de la rotation de l'image à partir de son point en haut à gauche, il passera au quadrant invisible.Il est donc très important d'utiliser la propriété translateX et translateY avec la propriété rotate dans css pour faire glisser l'image du quadrant invisible vers le quadrant visible pour l'afficher sur le navigateur Web. Veuillez vous référer au css transform property pour plus d'informations.

Le même pour css 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 utiliser ce nom de classe dans la propriété de classe de balise img.

<img src="xyz.jpg" id="image" class="image_rotate_90"/> 

Pour une rotation de -90 et +90, vous aurez besoin parfois de modifier sa hauteur et sa largeur soit avec une résolution d'écran ou avec résolution originale de l'image afin que l'image conserve sa forme originale. Faites-le en utilisant javascript à l'intérieur de l'étiquette du corps après le chargement de l'image. Supposons que votre image originale ait une résolution de 640 X 480. c'est-à-dire largeur = 480 et hauteur = 640. Donc, lorsque vous faites pivoter l'image, elle devient une image avec une résolution de 480 X 640. Donc, pour conserver sa forme originale. Vous pouvez faire ce qui suit sous la balise body after image loaded.

<script> 
    document.getElementById("image").width = 480px; 
    document.getElementById("image").height = 640px; 
</script>