Jquery rotate image and adjust the parent element accordingly

问题

I am using css rotate to rotate an image. It is working fine but it is not adjusting other elements as well. It is overlapping other elements. What I want if i rotate an image then it shouldn't overlap the other elements but adjust its height and width accordingly. Please see my code below

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)  */
        });
});

Please check my code in JS fiddle "http://jsfiddle.net/FcQZm/" I will really appreciate your help

回答1:

Sorry, it won't happen.

When an element is transformed, it's relative place starts acting as a container, and the transformed output rendered behaves as a fixed element, not interfeering with the other elements on the page.

As stated on W3's docs on transform, the effect is purelly visual:

Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow.

回答2:

It won't happen automatically, but you can use getBoundingClientRect() to tell you what the overall height and width is after the transformation, and use that to resize your wrapper (or other elements) to fit/accommodate the change:

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

Demo: http://jsfiddle.net/jtbowden/pnp1kyjh/1/

(works in latest 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"



    });
});

来源：https://stackoverflow.com/questions/26393227/jquery-rotate-image-and-adjust-the-parent-element-accordingly

标签

jquery

html

css

rotatetransform