javascript - 旋转后如何获得元素(DIV)的原始位置？

Question

对于使用 CSS 变换旋转的 DIV。

我需要在应用旋转之前获取 DIV 的原始位置(顶部、左侧、底部、右侧、宽度、高度)(以灰色 div 为例)。

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

我知道我可以删除 CSS 旋转并使用 Element.getBoundingClientRect();获得值(value)，但我想知道是否有更好的方法使用数学/几何。

我的需求是以编程方式重新创建一个 DIV，该 DIV 使用相对于视口(viewport)左上角的坐标精确定位在原始 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/