7

I would like to know how can i get the original dimensions of a element after rotating it, when i use transform: rotate() and try to get the dimensions after rotate using element.getBoundingClientRect() it returns a different width and heigh, is it possible to get the real dimensions after rotating a element?

let div1 = document.getElementById('one')
let div2 = document.getElementById('two')

// Here the width and height is 50 and 80
console.log(div1.getBoundingClientRect())

// Here because i used transform rotate the width is 86 and height 94
console.log(div2.getBoundingClientRect())
div#one {
  width: 50px;
  height: 80px;
  background-color: red;
}

div#two {
  width: 50px;
  height: 80px;
  background-color: red;
  transform: rotate(35deg);
}
<div id="one"></div>
<br/>
<div id="two"></div>
João Hamerski
  • 461
  • 1
  • 5
  • 22
  • 2
    you can just save the height of your element before rotation and use that as a ref. – Prosy Arceno May 07 '21 at 20:11
  • 2
    `getComputedStyle(element)["height"]` and `getComputedStyle(element)["width"]` is a potential option. – Nisala May 07 '21 at 20:22
  • Does this answer your question? [How can I measure the width and height of a rotated element on Javascript?](https://stackoverflow.com/questions/44322096/how-can-i-measure-the-width-and-height-of-a-rotated-element-on-javascript) – Heretic Monkey May 07 '21 at 20:33

2 Answers2

3

You can use offsetWidth and offsetHeight. This is likely more efficient than cloning and modifying the element.

let div1 = document.getElementById('one')
let div2 = document.getElementById('two')

// Here the width and height is 50 and 80
console.log(div1.getBoundingClientRect())

// Here because i used transform rotate the width is 86 and height 94
console.log(div2.getBoundingClientRect())

console.log(div2.offsetWidth);
console.log(div2.offsetHeight);
div#one {
  width: 50px;
  height: 80px;
  background-color: red;
}

div#two {
  width: 50px;
  height: 80px;
  background-color: red;
  transform: rotate(35deg);
}
<div id="one"></div>
<br/>
<div id="two"></div>
Nisala
  • 1,313
  • 1
  • 16
  • 30
  • 1
    Thanks for your answer, it works too but working with `getBoundingClientRect` is better sometimes because it returns the real dimensions when the element is resized, so this is why i'm not using `offsetWidth` or `clientWidth` – João Hamerski May 07 '21 at 20:32
  • 1
    @Nisala I gave you an upvote. I updated my answer and it appears to work but uses more resources. – Ryan Wilson May 07 '21 at 20:40
  • What i mean is if you use `transform: scale(1.3)` in an element, the difference is that if you use `getBoundingClientRect().width` it will return the real dimensions, but if you use `offset.width` it will return the dimensions without considering the `transform: scale()` property – João Hamerski May 07 '21 at 20:46
1

One option would be to clone the second div with cloneNode and then remove the tranform style to get it's original dimensions, please see snippet.

    let div1 = document.getElementById('one');
    let div2 = document.getElementById('two');
    //clone the rotated div and then remove the transform style
    //this will give you it's original dimensions
    let div3 = div2.cloneNode(false);
    div3.style.transform = "none";
    //hide the clone
    div3.style.visibility = "hidden";
    //append to the body
    document.body.append(div3);
    
    console.log(div3.getBoundingClientRect());
    
    //remove clone from the DOM
    div3.remove();
    // Here the width and height is 50 and 80
    console.log(div1.getBoundingClientRect());

    // Here because i used transform rotate the width is 86 and height 94
    console.log(div2.getBoundingClientRect());
div#one {
      width: 50px;
      height: 80px;
      background-color: red;
    }

    div#two {
      width: 50px;
      height: 80px;
      background-color: red;
      transform: rotate(35deg);
    }
<div id="one"></div>
    <br/>
    <div id="two"></div>
Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40