Question

我正在使用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小提琴中检查我的代码＆＃34; http://jsfiddle.net/FcQZm/＆＃34; 我将非常感谢您的帮助

Answer 1

抱歉，这不会发生。

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

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

注意：转换确实会影响视觉呈现，但除了影响溢出外，不会影响CSS布局。

Answer 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）。

Answer 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"



    });
});

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

3 个答案: