width/height after transform

Question

How do I retrieve the width and height properties after I\'ve applied transform: rotate(45deg);?

Like, 11x11 square after rotation becomes 17x17 (Chrome

Answer 1

Instead of calculating it yourself, you can get this via the HTMLDOMElement's getBoundingClientRect().

This will return an object with the correct height and width, taking into account the transformation matrix.

jsFiddle.