CODEWITHSUNDEEP
jqueryhtmlcssrotatetransform
orbnexus
orbnexus

Reputation: 797

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

Upvotes: 1

Views: 1860

Answers (3)

Jeff B
Jeff B

Reputation: 30099

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).

Upvotes: 2

Mahmoud D. Alghraibeh
Mahmoud D. Alghraibeh

Reputation: 1597

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"



    });
});

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

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.

Upvotes: 2

Related Questions