position post rotation test

by ShaCP

HTML

<div class="a"></div>
<div class="b"></div>

CSS

body {
  position: relative;
}

.a,
.b {
  height: 1px;
  transform-origin: left top;
  position: absolute;
  rotate: 45deg;
}

.a {
  width: 50px;
  background-color: red;
  left: 50px;
}

.b {
  width: 100px;
  background-color: blue;
}

JavaScript

console.log(document.getElementsByClassName('a')[0].getBoundingClientRect());
console.log(document.getElementsByClassName('b')[0].getBoundingClientRect());