I am running into a weird positioning issue while rotating an image wrapped into a div in JavaScript. When rotating the image by either 90 or 270 degrees, the image suddenly is 50px above and 50px to the right of its parent div. For 0 or 180 degrees it's just fine.

This is what I am doing:

&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.2.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="crop_container" style="width:400px; height:400px; border:solid 1px;"&gt;
        &lt;img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc6/249740_10150195623627623_506197622_7383520_7286937_n.jpg" style="display:block; position:relative; width:400px; height:400px;" /&gt;
    &lt;/div&gt;
    &lt;script language="JavaScript"&gt;
    var $cropContainer =  $("#crop_container");
    var $cropImage =  $("#crop_container img");
    var degrees = 90;

    $cropImage.css({"width":400, "height":300});
    $cropContainer.css({"width":300, "height":400});
    $cropImage.css({"-webkit-transform":"rotate("+degrees+"deg)","-moz-transform":"rotate("+degrees+"deg)"});
    //$cropImage.css({"top":50, "right":50});
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


Now when you uncommect the last css adjustment line with a correction of 50px from top and right it works just fine, but I have no clue as to why this is happening?

Any advice would be greatly appreciated!

Thanks!
Joni


Question: Using video ports 'backwards'
Answer: Your video adapter is an output device.  just because the ports are the same/similar doesn't automatically mean they are wired, or work the same.

If you want video in, you need a video capture adapter.