Jquery旋转图像并相应地调整父元素

我正在使用css旋转来旋转图像。它工作正常，但没有调整其他元素。 它与其他元素重叠。如果我旋转一个图像，那么它不应该与其他元素重叠，而是相应地调整其高度和宽度。 请看下面我的代码

HTML

<div id="wrapper">
<h1>Heading 1</h1>
<img id="testimg" src="http://thecutestblogontheblock.com/wp-content/uploads/2012/10/Owl-Walk-free-cute-halloween-fall-blog-BANNER.png" alt="" />
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button>Rotate</button>

请在JS FIDLE“”中检查我的代码

---

我将非常感谢你的帮助

对不起，这不会发生

当一个元素被转换时，它的相对位置开始充当一个容器，转换后的输出呈现为一个

固定的
元素，而不是与页面上的其他元素交互

如上所述，效果纯粹是视觉效果：

注意：转换确实会影响视觉渲染，但对CSS布局没有影响，只会影响溢出

对不起，这不会发生

当一个元素被转换时，它的相对位置开始充当一个容器，转换后的输出呈现为一个
固定的
元素，而不是与页面上的其他元素交互

如上所述，效果纯粹是视觉效果：

注意：转换确实会影响视觉渲染，但对CSS布局没有影响，只会影响溢出



旋转
#包装纸{
边框：1px实心#000；
宽度：250px；
身高：292px；
溢出：隐藏；
}
#包装机{
边框：1px纯红；
利润上限：-20px；
左边距：21px
}
jQuery（文档）.ready（函数（$）{
var imageR=document.getElementById（“testimg”）
var wrapper=document.getElementById（“包装器”）
$（“按钮”）。单击（函数（）{
$（“img#testimg”）.css（“-webkit transform”，“rotate（90度）”）；
wrapper.style.width=imageR.height+“px”
wrapper.style.height=imageR.width+“px”
});
});


旋转
#包装纸{
边框：1px实心#000；
宽度：250px；
身高：292px；
溢出：隐藏；
}
#包装机{
边框：1px纯红；
利润上限：-20px；
左边距：21px
}
jQuery（文档）.ready（函数（$）{
var imageR=document.getElementById（“testimg”）
var wrapper=document.getElementById（“包装器”）
$（“按钮”）。单击（函数（）{
$（“img#testimg”）.css（“-webkit transform”，“rotate（90度）”）；
wrapper.style.width=imageR.height+“px”
wrapper.style.height=imageR.width+“px”
});
});
这不会自动发生，但您可以使用
getBoundingClientRect（）
来告诉您转换后的总体高度和宽度，并使用它来调整包装器（或其他元素）的大小以适应更改：

var angle = 0;
$(function () {
    $("button").click(function () {
        angle = (angle + 30) % 360;

        var bounds = $("img#testimg").css({
            "transform-origin": "50% 50%",
            "transform": "rotate("+angle+"deg)",
        })[0].getBoundingClientRect();

        $("#wrapper").css({
            width: bounds.width,
            height: bounds.height
        });
    });
});

演示：

（适用于最新的Firefox、Chrome和IE）。
这不会自动发生，但您可以使用
getBoundingClientRect（）
告诉您转换后的总体高度和宽度，并使用它调整包装器（或其他元素）的大小以适应/适应更改：

var angle = 0;
$(function () {
    $("button").click(function () {
        angle = (angle + 30) % 360;

        var bounds = $("img#testimg").css({
            "transform-origin": "50% 50%",
            "transform": "rotate("+angle+"deg)",
        })[0].getBoundingClientRect();

        $("#wrapper").css({
            width: bounds.width,
            height: bounds.height
        });
    });
});

演示：

（适用于最新的Firefox、Chrome和IE）

var angle = 0;
$(function () {
    $("button").click(function () {
        angle = (angle + 30) % 360;

        var bounds = $("img#testimg").css({
            "transform-origin": "50% 50%",
            "transform": "rotate("+angle+"deg)",
        })[0].getBoundingClientRect();

        $("#wrapper").css({
            width: bounds.width,
            height: bounds.height
        });
    });
});