width/height after transform

Solution 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.

Solution 2:

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

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

  #box {
    -moz-transform:rotate(120deg);
    border:1px solid red;
    width:11px;
    height:11px;
  }
  </style>

  <script type="text/javascript">
  $(document).ready(function() {
    alert($('#box').width());
    alert($('#wrap').width());
  });
  </script>
</head>

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

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);

Solution 3:

I made a function for this, domvertices.js

It computes the 4 vertices 3d coordinates of any, deep, transformed, positioned DOM element -- really just any element: see the DEMO.

a                b
 +--------------+
 |              |
 |      el      |
 |              |
 +--------------+
d                c

var v = domvertices(el);
console.log(v);
{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

With those vertices, you can compute anything among: width, height... Eg, in your case:

// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

See the README for more infos.

It is published as a npm module (with no dep), so just install it with:

npm install domvertices

Cheers.

Solution 4:

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

// return an object with full width/height (including borders), top/bottom coordinates
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.

width/height after transform

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts