javascript - 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 result), but javascript still returns original width/height - 10x10.

How do I get this 17x17?

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.