Rotate Wrap

by Arman Bari

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