如何将 div 放置在旋转元素的顶部？

Question

我需要将一个 DIV (DIV.selector) 准确定位在另一个已旋转的 div (DIV.target) 之上。

在以下示例中： http://jsfiddle.net/egjnd9bp/5/ 请点击“旋转”并在“创建选择器”之后。

所需的结果将是与青色 div (DIV.target) 完全匹配（位置和旋转）的黄色框（DIV.selector）

目前我正在使用 getBoundingClientRect()，但我无法获得正确的 x.y 坐标，因为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));