Edit Question - KnowledgeHub

Title Body

I'm getting absolutely positioned rotated elements position with jQuery .position() method, then setting position-related attributes (top, left) with jQuery .css(pos) , where pos is the data returned by .position() . I think it'll leave the element in it's place, but elements position is changing. How can I use set rotated elements position, so that it'll be placed as expected? Maybe there is a coefficient depended on angle that changes position? I'm testing in Google Chrome v.9, Windows XP. HTML <div id="container"> <div id="element"> <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0Fawya9MVMez80ZusMVtk_4-ScKCIy6J_fg84oZ37GzKaJXU74Ma0vENc"/> </div> </div> CSS #container { position: relative; border: 1px solid #999; padding: 5px; height: 300px; width:300px; } #element { position: absolute; top:50px; left: 60px; width: auto; border: 1px solid #999; padding: 5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } JS $(document).ready(function(){ var $el = $('#element'), // getting position pos = $el.position(); alert(pos.left + '/' + pos.top); // alerts 37/11 // setting css position attributes equal to pos $el.css(pos); // re-getting position pos = $el.position(); alert(pos.left + '/' + pos.top); // alerts 14/-28 }); View it http://jsfiddle.net/Antaranian/2gVL4/

Tags (comma-separated) Cancel