CODEWITHSUNDEEP
javascriptjqueryhtmlcssrotation
Paparappa
Paparappa

Reputation: 2189

jquery/CSS rotate hides half of the image?

I want to be able to rotate an image in 4 steps if the user want it, but i'm having problems since the rotation i use centers the image and then hides half of the image when i just want the image to align to the left and to the top, even when rotated. I've used this script jqueryRotate and to see what I mean i've made a fiddle here: http://jsfiddle.net/sqnsA/

As you see it aligns the image to the center when rotating it vertical, is there a way with css or javascript to make it align to top and to the left. This is my javascript:

var angle = 0;
$('#rotate').click(function(e) {
    e.preventDefault();

    if (angle === 0) {
        $("#rotation").rotate(90);
    }
    if (angle === 1) {
        $("#rotation").rotate(180);
    }
    if (angle === 2) {
        $("#rotation").rotate(270);
    }
    if (angle === 3) {
        $("#rotation").rotate(360);
        angle = -1;
    }

    angle++;

});

And this is my HTML

<div style="position: relative;top: 0px;left: 0px;" id="rotation">
<img src="myimage.jpg" style="position: relative;max-height: 275px;max-width: 356px;" id="rotan"/>
</div>

<a href="" id="rotate">Rotate</a>

Upvotes: 0

Views: 1543

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

There is 4 solutions.

But first, let me explain your problem. When using css transform. there is a property called transform-origin wich is the point where the transformation occur. Its like if you put your figger on a sheet and rotate that sheet, your figger will be the rotation center.

Now you are rotating a div wich is a display:block. That mean it has 100% width and the height is equal to his content. Knowing that the default transform-origin value is 50%, that's why it rotate like that.

Now, the 4 solutions :

  1. Set the div display to inline-block. That will adjust the width to its content.

  2. Calculate the origin point to be in the center of the image.

  3. Rotate the image

  4. Make the div float

Here some information about transform-origin.

Upvotes: 2

Pat-rice
Pat-rice

Reputation: 432

Do you mean something like this ?

http://jsfiddle.net/bikiew/sqnsA/1/

<div style="position: relative;top: 0px;left: 0px; width:365px;" id="rotation">

I fixed the width of your div "rotation" to be the same than your image.

Upvotes: 0

Related Questions