jQuery调整旋转元素的大小

我已经到处寻找这个问题，但还没有真正找到一个明确的解决方案或例子来解决它。使用jQuery，当我旋转一个可调整大小的对象时，句柄和后续的调整大小操作都会出错。我如何解决或解决这个问题？下面是我所说的一个例子：

小提琴中的代码是：

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

---

和CSS将一个简单的div标签旋转90度。

这方面的基本概念是由发布的，他删除了他的答案，尽管我提出了要求，但没有恢复它

您可以对内容使用旋转的内部包装，然后将调整大小的控制柄附加到保持未旋转的外部元素

就高度和宽度而言，需要一些JS代码来保持内容与容器同步。下面是一个完整的演示：

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

#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 */
}

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

CSS:

$('#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();
            })()
        });
    }
}

#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 */
}

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

HTML:

$('#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();
            })()
        });
    }
}

#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 */
}

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

这是一个非常好的解决方案。它的一个小缺陷是，无论何时调整div的大小，它都会向上和向左跳一点，除非它对着其父元素的边缘。如果缩小div的顶部/左侧，然后从任意一侧调整大小，则可以看到这一点。@ajp15243您正在哪个浏览器中尝试此操作？我似乎无法在FF中复制它（尽管可能我只是误解了如何复制这个问题）应该是最新的稳定Chrome（v25.0.1364.97）。我也在Linux上，偶尔会看到一些小的奇怪的布局问题，我怀疑是因为Gnome3，但我通常不会在JSFIDLE上看到。为了更好地解释如何复制它，抓住顶部手柄并向下拖动，然后抓住左侧手柄并向右拖动。然后，不要拖太多，抓住并稍微移动右边或底部手柄，同时观察盒子的位置（如果你看左上角，最容易看到）。我在FF19中没有看到它。很有趣，谢谢你的回复。但是，如何使内部内容拉伸以填充父级内容呢？例如，以90度的间隔旋转箭头图像。下面是我所说的一堆东西：