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

【问题标题】：Jquery rotate image and adjust the parent element accordinglyJquery旋转图像并相应地调整父元素
【发布时间】：2014-10-15 22:30:47
【问题描述】：

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

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>

JQuery

var degrees = 0;
$("button").click(function(){
    degrees += 90;
        var img = $("#testimg");
        img.css({
            "-webkit-transform": "rotate(" + degrees + "deg)",
            "-moz-transform": "rotate(" + degrees + "deg)",
            "transform": "rotate(" + degrees + "deg)" /* For modern browsers(CSS3)  */
        });
});

请检查我在 JS fiddle "http://jsfiddle.net/FcQZm/" 中的代码非常感谢您的帮助

【问题讨论】：

标签： jquery html css rotatetransform

【解决方案1】：

对不起，这不会发生。

当一个元素被转换时，它的相对位置开始充当容器，并且转换后的输出呈现为fixed 元素，不会干扰页面上的其他元素。

如W3's docs on transform 所述，效果纯属视觉效果：

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

【讨论】：

【解决方案2】：

它不会自动发生，但您可以使用 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
        });
    });
});

演示：http://jsfiddle.net/jtbowden/pnp1kyjh/1/

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

【讨论】：

【解决方案3】：

jsfiddle

    <div id="wrapper">
    <img id="testimg" src="http://www.dothetest.co.uk/images/do-test.gif" alt="" />
</div>
<button>Rotate</button>

#wrapper{
    border:1px solid #000;
    width:250px;
    height:292px;
    overflow:hidden;
}
#wrapper img{

    border:1px solid red;
    margin-top:-20px;
    margin-left:21px
}


jQuery(document).ready(function($){

   var imageR=document.getElementById("testimg")
   var  wrapper=document.getElementById("wrapper")
    $("button").click(function(){
        $("img#testimg").css("-webkit-transform","rotate(90deg)");


        wrapper.style.width=imageR.height+"px"
        wrapper.style.height=imageR.width+"px"



    });
});

【讨论】：