jQuery resizing rotated elements

Question

I've searched around for this problem but haven't really found a definitive solution or example to follow to resolve it. Using jQuery, when I rotate a resizable, the handles and subsequent resizing operations are goofed up. How can I resolve or work around this? Here's an example of what I'm talking about: http://jsfiddle.net/LVU7c/

The code in the fiddle is:

$('#widget').resizable({ handles: 'n, e, s, w' });

and CSS to rotate a simple div tag 90 degrees.

Answer 1

The basic concept for this was posted by Linus Gudn Jokela, who deleted his answer, and has not restored it despite my request.

You could use an rotated inner wrapper for your content, then attach the resizing handles to the outer element, which remains unrotated.

Some JS code will be needed to keep the content in sync with the container as far as height and width are concerned. Here is a complete demonstration: http://jsfiddle.net/fXthv/

JS:

$('#widget').resizable({
    handles: 'n, e, s, w',
    resize: function(){
        correct(this);
    }
});

function correct(el) {
    var widget = $('#widget_content'),
        deg = widget.data("rotate");
    if (typeof deg == "number") {
        widget.css({
            width: (function () {
                if (deg % 180 == 0) return $(el).outerWidth()
                else return $(el).outerHeight()
            })(),
            height: (function () {
                if (deg % 180 == 0) return $(el).outerHeight()
                else return $(el).outerWidth()
            })(),
            marginLeft: (function () {
                if (deg % 360 == 90) return $(el).outerWidth();
                else if (deg % 360 == 180) return $(el).outerWidth();
                else return 0;
                //else if (deg % 360 == 270) return $(el).outerWidth();
            })(),
            marginTop: (function () {
                if (deg % 360 == 270) return $(el).outerHeight();
                else if (deg % 360 == 180) return $(el).outerHeight();
                else return 0;
                //else if (deg % 360 == 270) return $(el).outerWidth();
            })()
        });
    }
}

CSS:

#widget {
    width: 100px;
    height: 100px;
    background-color: #cecece;
}
#widget_content {
    margin-left:100px;
    width: 100px;
    height: 100px;
    background-image: url(http://aux.iconpedia.net/uploads/2106003206.png);
    background-size: 100% 100%;
    /* removing the styles below will make the image appear as expected */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    /* IE 9 */
    -moz-transform:rotate(90deg);
    /* Firefox */
    -webkit-transform:rotate(90deg);
    /* Safari and Chrome */
    -o-transform:rotate(90deg);
    /* Opera */
}

HTML:

<div id="widget">
    <div id="widget_content"></div>
</div>