How to change JQuery reisize handles axis as we rotate element?

I’m trying to add JQuery resize with handles to an element and it works fine,
Except when I rotate it transform: rotate(90deg) or any other angle, the handles axis remains the same and causes issues.

I’m trying to rotate the resize handlers axis as per the elements’ angle (if that’s possible).

Here’s the sample code I made for this:

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  /* transform:rotate(90deg); */
  & img {
    width:100%;
    width:100%;
  }
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
     });
}

dragger();
</script>

Here, the resize along with draggable works perfectly fine, except as I add transform: rotate(90deg) to the `main element, the resize handles axis remains the same.

Here’s a JSFiddle for the same to play around.

Any help is greatly appreciated.