How to position a div on top of a rotated element?

Question

I need to exactly position a DIV (DIV.selector) on top of another div which has been rotate (DIV.target).

In the following xample: http://jsfiddle.net/egjnd9bp/5/ please click 'rotate' and after 'create selector'.

The desired result would be the yellow box (DIV.selector) which exact match( position and rotation) the cyan div (DIV.target)

At the moment I am using getBoundingClientRect(), but I am not able to get the right x.y coordinates as rect include the boundary of the object rotated.

Notes: A possible solution would be to remove the rotation, using getBoundingClientRect() and reapply the rotation after, but I am not sure if it is a proper solution, I would be glad to have a feedback, possibly on a more math/geometric solution instead.

<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);
}

Interesting, maybe related: http://stackoverflow.com/questions/11229040/how-to-get-the-position-of-element-transformed-with-css-rotate — GibboK, Apr 13 '15 at 12:14
Maybe related: http://stackoverflow.com/questions/24823222/get-div-corners-pixel-positions-after-rotation — GibboK, Apr 13 '15 at 12:20

Vadim S · Accepted Answer · 2015-04-13T12:31:40.837

I updated your fiddle http://jsfiddle.net/egjnd9bp/6/ You need to calculate angle of rotation

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));

Original article: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

score 1 · Answer 2 · answered Apr 13 '15 at 12:50

Hi I have a bit different solution. You can check it here. This instead your 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));

How to position a div on top of a rotated element?

2 Answers2