Как разместить div поверх вращающегося элемента?

Question

Мне нужно точно расположить DIV (DIV.selector) поверх другого div, который был повернут (DIV.target).

В следующем примере: http://jsfiddle.net/egjnd9bp/5/ нажмите «повернуть» и «создать селектор».

Желаемый результат был бы желтый ящик (DIV.selector), который точное соответствие (положение и вращение) циановая ДИВ (DIV.target)

На данный момент я использую getBoundingClientRect(), но я не удалось получить правильные координаты xy, так как rect включает в себя границу объекта, повернутого.

Примечания: Возможным решением было бы удалить поворот, используя getBoundingClientRect() и повторно применить поворот после, но я не уверен, что это правильное решение, я был бы рад получить обратную связь, возможно, более математическое/геометрическое решение.

<div id="example" style="display: none;"></div> 
<div id="target"></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-selector" type="button">create selector</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-selector').addEventListener('click', function (event) { 
    var rect = document.getElementById('target').getBoundingClientRect(); 
    document.body.innerHTML += '<div style="position:absolute; top:' + rect.top + 'px; left:' + rect.left + 'px; width:' + rect.width + 'px; height:' + rect.height + 'px; background:yellow; opacity:0.5;"></div>'; 
}.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 gray; 
    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

Я обновил свой скрипку http://jsfiddle.net/egjnd9bp/6/ Вы должны вычислить угол поворота

var tr = st.getPropertyValue("-webkit-transform") || 
    st.getPropertyValue("-moz-transform") || 
    st.getPropertyValue("-ms-transform") || 
    st.getPropertyValue("-o-transform") || 
    st.getPropertyValue("transform") || 
    "FAIL"; 

// With rotate(30deg)... 
// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px) 
console.log('Matrix: ' + tr); 

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix 

var values = tr.split('(')[1].split(')')[0].split(','); 
var a = values[0]; 
var b = values[1]; 
var c = values[2]; 
var d = values[3]; 

var scale = Math.sqrt(a*a + b*b); 

console.log('Scale: ' + scale); 

// arc sin, convert from radians to degrees, round 
var sin = b/scale; 
// next line works for 30deg but not 130deg (returns 50); 
// var angle = Math.round(Math.asin(sin) * (180/Math.PI)); 
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 

Оригинал статьи: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Answer 2

Привет У меня есть немного другое решение. Вы можете это проверить here. Это вместо того, чтобы ваш JavaScript:

var targetDiv =""; 
document.getElementById('btn-rotate').addEventListener('click', function (event) { 
    targetDiv= ""; 
    targetDiv= document.getElementById('target').getBoundingClientRect(); 
    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-selector').addEventListener('click', function (event) { 
    var rect = targetDiv; 
    document.body.innerHTML += '<div class="rotation" style="position:absolute; top:' + rect.top + 'px; left:' + rect.left + 'px; width:' + rect.width + 'px; height:' + rect.height + 'px; background:yellow; opacity:0.5;"></div>'; 
}.bind(this));