jQuery UI resizable with rotated element

Question

I have a rotated element to make it resizable. The rotation is drawn by css transform:rotate.

Here I have a problem the direction of resizing is not working properly.

For example, when you drag the left and top corner to make it smaller, the element would be larger. It happens at the right and top corner as well.

Take a look: https://codepen.io/restard222/pen/JzpYxR

I guess the library of jQuery UI resizable works based on position, size before rotation.

Libraries

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

HTML

<div class="rotate-canvas">
  <div class="rectangle_rotate">
    <div class="handler _se se"></div>
    <div class="handler _sw sw"></div>
    <div class="handler _ne ne"></div>
    <div class="handler _nw nw"></div>
  </div>
</div>

SCSS

.rotate-canvas{
  position: relative;
  width: 600px;
  height: 400px;
  margin: 24px auto;
  border: 1px solid;
}
.rectangle_rotate{
  position: relative;
  width: 200px;
  height: 100px;
  background: blue;
  top: 100px;
  left: 100px;
  opacity: .5;
  transform: rotate(285deg);
  &:before{
    position: absolute;
    top: 0;
    left: 0;
    content: 'top';
  }
  &:after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: 'bottom';
  }
}

.handler{
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  &._se{
    bottom: -5px;
    right: -5px;
  }
  &._sw{
    bottom: -5px;
    left: -5px;
  }
  &._nw{
    top: -5px;
    left: -5px;
  }
  &._ne{
    top: -5px;
    right: -5px;
  }
}

javascript

var resizable_options = {
    handles    : {'se': '.se', 'sw': '.sw', 'ne': '.ne', 'nw': '.nw'}
  , aspectRatio: 200 / 100
}
$('.rectangle_rotate').resizable(resizable_options);

I know it would be better to use canvas instead of dom with css. But this time I need to solve it remaining the original sources.

HELP MEEEEE!!!

Answer 1

Per the docs :

Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .eg, ui-resizable-s.

Update your handlers by adding <div class="ui-resizable-handle ui-resizable- , like:

<div class="ui-resizable-handle ui-resizable-se handler _se se"></div>
<div class="ui-resizable-handle ui-resizable-sw handler _sw sw"></div>
<div class="ui-resizable-handle ui-resizable-ne handler _ne ne"></div>
<div class="ui-resizable-handle ui-resizable-nw handler _nw nw"></div>

Updated codepen: https://codepen.io/anon/pen/MxGwGp