Rotation Test

by Arman Bari

HTML

<div id="test1">
    <div id="test2"></div>
</div>

CSS

#test1{
    background-color:black;
    position:absolute;
    top:100px;
    left:100px;
    width:200px;
    height:100px;
}
#test2{
    background-color:red;
    position:absolute;
    width:200px;
    height:100px;
    top:1px;
    left:1px;
}

JavaScript

var width = $('#test2').width(); 
var height = $('#test2').height();

document.getElementById('test2').style.webkitTransform = 'rotate(' + 90 + 'deg)';
$('#test2').css('-webkit-transform-origin', width/2 + 'px ' + width/2 + 'px');
$('#test2').width(height + 'px');
$('#test2').height(width + 'px');

width = height + width;
height = width - height;
width = width - height;

document.getElementById('test2').style.webkitTransform = 'rotate(' + 180 + 'deg)';
$('#test2').css('-webkit-transform-origin', height/2 + 'px ' + width/2 + 'px');
$('#test2').width(height + 'px');
$('#test2').height(width + 'px');

width = height + width;
height = width - height;
width = width - height;

document.getElementById('test2').style.webkitTransform = 'rotate(' + 270 + 'deg)';
$('#test2').css('-webkit-transform-origin', height/2 + 'px ' + height/2 + 'px');
$('#test2').width(height + 'px');
$('#test2').height(width + 'px');

width = height + width;
height = width - height;
width = width - height;

document.getElementById('test2').style.webkitTransform = 'rotate(' + 360 + 'deg)';
$('#test2').css('-webkit-transform-origin', height/2 + 'px ' + width/2 + 'px');
$('#test2').width(height + 'px');
$('#test2').height(width + 'px');