Dynamically update transform-origin of a CSS3 rotated element when modifying width or height

Question

Following on from Changing width/height to a CSS rotated div triggers top/left reposition I need some help to solve a CSS rotation and dynamic width/height.

I understand transform-origin and think I need to dynamically update it at the same time the width or height of the element is updated. I'm only interested in the technical solution, rather than any cross-browser cleverness and hence the demo only uses the -webkit prefix.

HTML

<div id="wrap">
    <div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
    Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
    Angle: <input id="angle" type="range" min="0" max="360" step="1" value="0">
</div>

CSS

#rotated {
    background:lightblue;
    border:1px dotted #000;
    height:100px;
    width:200px;
    position:absolute;
    top:300px;
    left:100px;
    overflow:hidden;
}

#width, #height, #angle {
    display:block;
    margin-bottom:10px;
    width:200px;
}

JavaScript

$('#width').change(function() {
    $('#rotated').css({width:this.value + 'px'});
});

$('#height').change(function() {
    $('#rotated').css({height:this.value + 'px'});
});

$('#angle').change(function() {
    $('#rotated').css({'-webkit-transform': 'rotate(' + this.value + 'deg)'});
});

In the second demo, adding the CSS

#rotated {
    -webkit-transform-origin: 100px 50px;
    -webkit-transform: rotate(60deg);
}

and updating the value of the angle slider to 60

Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">

produces the correct result when modifying the width/height via the sliders, in that the element grows and shrinks in the x, y dimensions without moving position. However, rotating the element now no longer around the desired (centre point) origin.

I have tried some variations (mousedown, mousemove, change) on this which I thought would set the origin before the width/height is modified but the <div> is still shifting position.

$('#width, #height, #angle').change(function() {
    $('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
});

I assume jQuery is applying the CSS changes at the same time, whereas I think that the origin needs updating before the width/height change.

Basically I want the shape to always rotate about the center point and to not move when modifying the width/height if the shape is already rotated.

Answer 1

FIDDLE DEMO!!!

I'm first ganna tell you WHY this is happening. As you can see when your div isn't rotated there is no problem. So why is this strange behaviour happening when it is?

Answer: Because you're asking it to... As you change the height or width, the div's 50%, or middle point is changing. and thus, the browser places your div in a way where the new 50% of the unrotated DIV would be, and then rotates it.

The solution is to wrap the rotated div in another div (lets say "#wrapper") with a fixed width and height and overflow:visible.

Then you place the #rotated inside the #wrapper and on width or height change, calculate the change and translate the #rotated div in a way where it is always in the center of #wrapper ( for example, for width,the translation is -(wrapWidth-newWidth)/2 ).

Then you rotate the wrapper and voila.

here's the code based on your setup:

HTML:

<div id="wrap">
    Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
    Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
    Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">
</div>
<div id="rotateWrap">
    <div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

CSS:

#width, #height, #angle {
    position:relative;
    display:block;
    margin-bottom:10px;
    width:200px;
}

#rotateWrap{
    position:absolute;
    overflow:visible;
    height:100px;
    width:200px;
    top:200px;
    left:100px;
    outline:2px solid red;
    -webkit-transform-origin: 50% 50%;

}

#rotated {
    background:lightblue;
    position:relative;
    overflow:hidden;
    height:100px;
}

#wrap{
    position:absolute;
}

JAVASCRIPT

wPrev=$("#rotateWrap").width();
hPrev=$("#rotateWrap").height();

$('#width').mousedown(function(){
}).change(function() {
    $("#rotated").width(newW=$(this).val())
        .css({left: -(newW-wPrev)/2 + "px"});
});

$('#height').mousedown(function(){
}).change(function() {
    $("#rotated").height(newH=$(this).val())
        .css({top: -(newH-hPrev)/2 + "px"});
});


$('#angle').change(function() {
    $("#rotateWrap").css({"-webkit-transform":"rotate("+$(this).val()+"deg)"});
});