Неправильно слева, сверху при изменении размера при применении преобразования css rotate

Question

Я работаю над сценарием, где я должен изменить размер div с помощью элементов управления jQuery UI. Элементы управления изменением размера отлично работают, когда не применяется преобразование вращения. Но когда вы поворачиваете div и затем изменяете его размер, div начинает перемещаться в нижний левый или нижний правый угол ( см. Анимированный GIF здесь (откройте ссылку в новой вкладке)).

Вот полный код: jsfiddle

Ниже приведен код изменения размера элемента.

 var inner = elem.find(".inner");
        var values = transform_matrix(inner);


        if(values != "none"){
            var innerWidth = ui.size.width/values[0];
        }
        else{
            var innerWidth = ui.size.width;
        }
        inner.width(innerWidth);

        var innerHeight = inner.height() * values[0];

        elem.css({
            height: innerHeight,
            left: ui.position.left + 10,
            top: ui.position.top +10,
        });
        controls.css({
            height: innerHeight,
        });

Любая помощь будет принята с благодарностью.