Take the 2-minute tour ×

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?

share|improve this question
i wonder why you're getting 17x17, supposed it's rotated by 45 degrees from 11x11, then new dimensions should be 15x15, or 16x16 –  Paul Dinham Sep 27 '11 at 7:29
I think Chrome automatically ceils the cosinus result. –  jolt Sep 27 '11 at 7:34
add comment

3 Answers

up vote 8 down vote accepted

Even if you rotate something the dimensions of it do not change, so you need a wrapper. Try wraping your div with another div element and count the wrappers dimensions:

  <style type="text/css">
  #wrap {
    border:1px solid green;

  #box {
    border:1px solid red;

  <script type="text/javascript">
  $(document).ready(function() {

 <div id="wrap">
  <div id="box"></div>

Redited: the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:

var rotationAngle;

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle); 
share|improve this answer
Maybe in Firefox it doesn't change, but Chrome in inspector view shows calculated values. Wrapper is a great solution, but it's expensive. –  jolt Sep 27 '11 at 7:40
@Tom firefox behaves just like you described. first of all we need to keep clear that a rotated box has still the same dimensions. its like, if you rotate a piece of paper on your desk, its dimensions remain the same. thats why you need the wrapper. if you cant affort it you need mathematics to calculate the dimensions you need. the same mathematics, firefox uses internally to calculate wrap's dimensions. please consider my +1 here. –  nonouco Sep 27 '11 at 7:47
Yeah, while you posted this, I already made a function to calculate new dimensions. -1 for CSS3/DOM3/HTML5 for not making native functions to retrieve these essential values. –  jolt Sep 27 '11 at 8:13
While hitting away on this, I finally figured out that cos/sin in javascript take radials! Not degrees! I hope I saved someone a little time with this comment ;) –  Steven Van Ingelgem Feb 4 '13 at 20:20
The mathematical solution is working well for the width, how can I do the same to calculate the height? –  Light Jun 9 '13 at 10:23
add comment

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.


share|improve this answer
add comment

In case you're looking for a function to programmatically calculate these values...

var getPositionData = function(el){
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());

// get rotated dimensions   
var transformedDimensions = function(el, angle){
    var dimensions = getPositionData(el);
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };

Here's a little something I put up. Probably not the best thing ever, but does the job for me.

share|improve this answer
add comment

Your Answer


