Width/Height After Transform

width/height after transform

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

How to get the real width and height of element after rotating it?

One option would be to clone the second div with cloneNode and then remove the tranform style to get it's original dimensions, please see snippet.

    let div1 = document.getElementById('one');
    let div2 = document.getElementById('two');
    //clone the rotated div and then remove the transform style
    //this will give you it's original dimensions
    let div3 = div2.cloneNode(false);
    div3.style.transform = "none";
    //hide the clone
    div3.style.visibility = "hidden";
    //append to the body
    document.body.append(div3);
    
    console.log(div3.getBoundingClientRect());
    
    //remove clone from the DOM
    div3.remove();
    // Here the width and height is 50 and 80
    console.log(div1.getBoundingClientRect());

    // Here because i used transform rotate the width is 86 and height 94
    console.log(div2.getBoundingClientRect());

div#one {
      width: 50px;
      height: 80px;
      background-color: red;
    }

    div#two {
      width: 50px;
      height: 80px;
      background-color: red;
      transform: rotate(35deg);
    }

<div id="one"></div>
    <br/>
    <div id="two"></div>

set width and height of an image after transform: rotate

Hey,

Please Try this code.

var $=jQuery.noConflict();$(document).ready(function(){ $('#RotateButton').click(function(){    $('.col').toggleClass("afterRot"); });});/* ----- IE Support CSS Script ----- */var userAgent, ieReg, ie;userAgent = window.navigator.userAgent;ieReg = /msie|Trident.*rv[ :]*11\./gi;ie = ieReg.test(userAgent);if(ie) {  $(".col").each(function () {    var $container = $(this),        imgUrl = $container.find("img").prop("src");    if (imgUrl) {      $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");    }  });}

body { padding: 0; margin: 0; }.col { position: relative; display: block; width:100vh; height: 100vh; }.afterRot{ transform: rotate(90deg); object-fit: cover; }.col img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; }.custom-object-fit { position: relative; background-size: cover; background-position: center center; }.custom-object-fit img { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="mob"> <button type="button" id="RotateButton"> Rotate </button> <div class="col">          <img class="nor" id="rowImg" src="https://cdn-images-1.medium.com/max/1600/1*tSyuv3ZRCfsSD5aXB7v8DQ.png">    </div></div>

Get the width and height of rotated object after transform

This is the best working formula I have come up with:

var h = $(obj).height() * Math.abs(Math.cos(deg)) + $(obj).width() * Math.abs(Math.sin(deg));
var w = $(obj).width() * Math.abs(Math.cos(deg)) + $(obj).height() * Math.abs(Math.sin(deg));

How to reset a Rectangle's x,y,width,height, after transform

It seems that setting flipEnabled and rotationEnabled to false on the transformer prevents rotations from happening.

Changing both width, height and transform simultaneously cause the weird transition

I change transform property on js : 50px and 100px is become calc(300px - 50%)

calc(300px - 50%) is line position minus half of .box's div

const states = [{
    height: '250px',
    width: '500px',
    transform: 'translate(calc(300px - 50%), 50px)'
  },
  {
    height: '150px',
    width: '250px',
    transform: 'translate(calc(300px - 50%), 100px)'
  },
]

let currentState = 0;

function updateState() {
  const box = document.querySelector(".box");

  const state = states[currentState];

  currentState = (currentState + 1) % states.length

  box.style.height = state.height
  box.style.width = state.width
  box.style.transform = state.transform
}

.button {
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  transition: 0.4s ease-in-out;
  position: absolute;
  background: #AAA;
  left: 0;
  top: 0;
}

.line {
  position: absolute;
  left: 300px;
  height: 100%;
  background: red;
  width: 1px;
}

.small-box {
  width: 10px;
  height: 10px;
  border: solid 1px black;
  position: absolute;
  transform: translateX(-50%);
}

<div class="box">
  <div class="small-box" style="left: 50%; top:0"></div>
</div>
<div class="line"></div>
<button class="button" onclick="updateState()">Update State</button>

Adjusting div width and height after rotated

It seems like the transform is applied after everything else, so the width and height aren't updated. The best solution I can think of is to calculate the rotated dimensions yourself, using the rotation matrix:

[ cos X     -sin X ] [ width  ]
[ sin X      cos X ] [ height ]

It's straightforward to translate this into JavaScript. You need to rotate all four corners (0,0) (w,0) (0,h) (w,h) and then the rotated dimensions are the width and height of the rotated bounding rectangle.

var angle = angle_in_degrees * Math.PI / 180,
    sin   = Math.sin(angle),
    cos   = Math.cos(angle);

// (0,0) stays as (0, 0)

// (w,0) rotation
var x1 = cos * width,
    y1 = sin * width;

// (0,h) rotation
var x2 = -sin * height,
    y2 = cos * height;

// (w,h) rotation
var x3 = cos * width - sin * height,
    y3 = sin * width + cos * height;

var minX = Math.min(0, x1, x2, x3),
    maxX = Math.max(0, x1, x2, x3),
    minY = Math.min(0, y1, y2, y3),
    maxY = Math.max(0, y1, y2, y3);

var rotatedWidth  = maxX - minX,
    rotatedHeight = maxY - minY;

Width/Height After Transform