How to rotate an image in Javascript or CSS

Question

I am creating a simple game.

I want to use jquery to rotate joints, making it move. I use .animate ( http://api.jquery.com/animate/ ) to animate CSS properties, but if you can also use Javscript, I can make my own custom code.

Read more TO-THE-POINT

How to rotate images in CSS or Javascript? I prefer CSS, but Javascript is good too.

If this is not possible (I'm sure it is, but I'm still not giving up) is there any other way to do what I'm trying to do without creating a bunch of separate images, each of which rotates differently, Or maybe someone at least give me an example of a site that does something similar.

EDIT: I need 1 CSS property (no -something: rotation (500deg);) which works with FireFox , Safari and Chrome , as they are the only browsers that I really work with.

Answer 1

Firefox and Webkit browsers support CSS property "conversions" ("-webkit-transform", "-moz-transform"). They can do all kinds of interesting things. There's a very weak IE tool that allows very limited rotation, so this is not an option for something like a game.

, Stackoverflow : http://gutfullofbeer.net/compass.html

Answer 2

:

• CSS

Answer 3

1) - -90 270 2) - +90 3) - 180 .

. , , - img. -. . translateX translateY, rotate css, , -. . css transform.

Css ,

.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%);
}

img.

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

-90 +90 , , . javascript body .

<script>
    document.getElementById("image").width = screen.height;
    document.getElementById("image").height = screen.width;
</script>

, 640 X 480. = 480 = 640. , , 480 X 640. , . .

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

Answer 4

, , , , Safari ( ), :

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

, .

Answer 5

- : http://jqueryrotate.com/??

, IE >= 6

Answer 6

, , JavaScript <img src="XXX" /> CSS background-image: url('XXX'); ( JS), .