Как получить исходное положение элемента (DIV) после его поворота?

Question

Для DIV, который был повернут с использованием CSS-преобразования.

Мне нужно получить исходное положение DIV (сверху, влево, снизу, вправо, ширина, высота) до того, как была применена ротация (посмотрите пример серого div).

http://jsfiddle.net/akycc4t1/7/

Я знаю, что я могу удалить вращение CSS и использовать Element.getBoundingClientRect(); , чтобы получить значение, но мне было интересно, если есть лучший подход с использованием математики/геометрии.

Мои потребности - это заново создать программно DIV, расположенный точно поверх оригинала, используя координаты относительно левого верхнего угла окна просмотра. Другие методы или область идеи также приветствуются.

<div id="example" style="display: none;"></div> 
<div id="target" class="rotation"></div> 
<div id="trace"></div> 
<button id="btn-rotate" type="button">rotate</button> 
<button id="btn-coordinate" type="button">get coordinate x,y</button> 
<button id="btn-coordinate-notrotated" type="button">get coordinate as target was not rotated</button> 

document.getElementById('btn-rotate').addEventListener('click', function (event) { 
    document.getElementById('target').classList.add('rotation'); 
    document.getElementById('example').style.display = ''; 
}.bind(this)); 

document.getElementById('btn-coordinate').addEventListener('click', function (event) { 
    alert(JSON.stringify(document.getElementById('target').getBoundingClientRect())); 
}.bind(this)); 

document.getElementById('btn-coordinate').addEventListener('click', function (event) { 
    alert(JSON.stringify(document.getElementById('target').getBoundingClientRect())); 
}.bind(this)); 


document.getElementById('btn-coordinate-notrotated').addEventListener('click', function (event) { 
    // solution here  
    alert('{top: xxxx,left: xxxx, right: xxxpx, width: 200, height: 200}'); 
}.bind(this)); 

#target { 
    position:absolute; 
    top:100px; 
    left:100px; 
    width:200px; 
    height:200px; 
    background-color: cyan; 
    transform-origin: 50% 50% 0; 
} 
#trace { 
    position:absolute; 
    top:100px; 
    left:100px; 
    width:200px; 
    height:200px; 
    border: 1px solid darkgray; 
    opacity: 0.1; 
} 
#example { 
    position:absolute; 
    top:100px; 
    left:100px; 
    width:5px; 
    height:5px; 
    background-color: red; 
    z-index: 100; 
} 
.rotation { 
    -ms-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg); 
    transform: rotate(10deg); 
} 

Answer 1

Используя .css(), попробуйте

document.getElementById('btn-coordinate-notrotated') 
.addEventListener('click', function (event) { 
    // solution here  
    var styles = $("#target") 
        .css(["height", "width", "top" 
         , "bottom", "left", "right" 
         , "background", "position"]); 
    $("<div />", {"class":"clone", "css":styles}).appendTo("body"); 
    alert('{top: ' + styles.top + ',left: ' 
      + styles.left + ', right: ' 
      + styles.right + ', width: ' 
      + styles.width + ', height: ' 
      + styles.height + '}'); 
}.bind(this)); 

jsfiddle http://jsfiddle.net/akycc4t1/9/

Answer 2

// solution here 
var style = getComputedStyle(document.getElementById('target')); 
alert('{top: ' + style.top + ', left: ' + style.left + ', width: 200, height: 200}');