jQuery .position() strangeness while using CSS3 rotate attribute

Question

I\'m getting absolutely positioned rotated elements position with jQuery .position() method, then setting position-related attributes (top, left) with jQuery

Answer 1

Had similar problem. There is simple solution (not elegant, but working):

• set current angle to 0
• read X/Y position

• revert angle back to its value

  var temp = $(this).position();
  temp.angle = getRotationDegrees( $(this) );            // remember current angle
  rotateObject($(this), 0);                              // set angle to 0
  temp.left = Math.round($(this).position().left);       // proper value
  temp.top = Math.round($(this).position().top);         // proper value
  
  // revert back the angle
  rotateObject($(this), temp.angle); 
  

Used functions:

    function rotateObject(obj, angle) {
        obj.css({ '-webkit-transform': 'rotate(' + angle + 'deg)'});
        obj.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
        obj.css({ '-ms-transform': 'rotate(' + angle + 'deg)'});
        obj.css({ 'msTransform': 'rotate(' + angle + 'deg)'});
        obj.css({ '-o-transform': 'rotate(' + angle + 'deg)'});
        obj.css({ '-sand-transform': 'rotate(' + angle + 'deg)'});
        obj.css({ 'transform': 'rotate(' + angle + 'deg)'});
    }

    function getRotationDegrees(obj) {
        var matrix = obj.css("-webkit-transform") ||
        obj.css("-moz-transform")    ||
        obj.css("-ms-transform")     ||
        obj.css("-o-transform")      ||
        obj.css("transform");
        if(matrix !== 'none') {
            var tr;
            if (tr = matrix.match('matrix\\((.*)\\)')) {
                tr = tr[1].split(',');
                if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
                    var angle = Math.round(Math.atan2(tr[1], tr[0]) * (180/Math.PI));
                }else{
                    var angle = 0; 
                }
            }else if(tr = matrix.match('rotate\\((.*)deg\\)')){
                var angle = parseInt(tr[1]); 
            }
        } else { var angle = 0; }
        return (angle < 0) ? angle + 360 : angle;
    }