view raw
jolt jolt - 10 months ago 72
jQuery Question

width/height after transform

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?


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;

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