JSFiddle - React, Tailwind, and code Playground

by Marko Vasic

HTML

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

CSS

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

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
    console.log(rect);
    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));