CODEWITHSUNDEEP
javascriptjquerycsshtml
rikky
rikky

Reputation: 331

How to keep image in its original place while rotating

I have an image in my HTML document:

<img id="img1" src="C:\Html\img1.jpg" alt="my-image" width="150" height="150" Style="position:relative;left:600;top:45;"`>

I want this image to rotate on button click , I'm able to do this but the image is moving from its position to default position.

function Test() {
    var angle = 0;
    setInterval(function(){
        angle+=3;
        $("#img1").rotate(angle);
    }, 50);
}

I want the image to be in the place where it first loaded.

Upvotes: 3

Views: 736

Answers (2)

rink.attendant.6
rink.attendant.6

Reputation: 46208

This doesn't use jQuery rotate, but you can set the transform-origin property in my version:

$('#img1').click(function () {
    'use strict';

    var $this = $(this),
        angle = 0,
        v;

    setInterval(function () {
        angle += 3;
        v = "rotate(" + angle + "deg)"

        $this.css({
            '-webkit-transform': v,
            '-moz-transform': v,
            '-ms-transform': v,
            transform: v
        });
    }, 50);
});

Of course you don't have to target this, as in your case you would use #img1 and the event handler would be on the button.

See jsFiddle

Upvotes: 1

Pointy
Pointy

Reputation: 413720

You can pass in a "center" when you use that plugin.

$("#img1").rotate({angle: angle, center: ["50%", "50%"]});

It's right there in the documentation.

Upvotes: 3

Related Questions