How to get the real width and height of element after rotating it?

Question

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>

you can just save the height of your element before rotation and use that as a ref. — Prosy A.
– Prosy A., Commented May 7, 2021 at 20:11
getComputedStyle(element)["height"] and getComputedStyle(element)["width"] is a potential option. — Nisala
– Nisala, Commented May 7, 2021 at 20:22
Does this answer your question? How can I measure the width and height of a rotated element on Javascript? — Heretic Monkey
– Heretic Monkey, Commented May 7, 2021 at 20:33

Nisala · Accepted Answer · 2021-05-07 20:27:36Z

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>

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
@Nisala I gave you an upvote. I updated my answer and it appears to work but uses more resources.
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

Ryan Wilson · Accepted Answer · 2021-05-07 20:39:35Z

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>

Thanks, i tested here and your idea worked perfectly, i didn't realized that. But your code isn't working for some reason.

Collectives™ on Stack Overflow

How to get the real width and height of element after rotating it?

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related