Javascript CSS3图像旋转和重新定位以适应div

我将从JS Fiddle开始：

​​​​​​​​​

我有一个整页的div

#page

，在另一个div

#容器

中，绝对定位在

#page

我想要实现的是，将其内部的图像旋转

90度

，

180度

或

270度

，但始终将该图像移动到

#容器的左上角

---

我尝试了一点

转换原点

，但找不到任何解决方案

设置图像的

位置：绝对

然后计算角度。。如果是90或270，则设置图像的“左”和“上”属性

代码

$('a').click(function(e) {
    e.preventDefault();
    var angle = $(this).attr("id");
    console.log("angle");
    var $container = $('#container');
    var left = 0;
    var top = 0;
    if(+angle === 90 || +angle === 270){
        top = 50;
        left = -50;
    }
    $("#my_image").css({
      transform: 'rotate('+angle+'deg)',
      '-moz-transform': 'rotate('+angle+'deg)',
      '-webkit-transform': 'rotate('+angle+'deg)',
        'top' : top + 'px',
        'left' : left + 'px'
    });
}).click();​  // Fire click on DOM ready

它工作得很好，但是如果我有200x100以外的其他尺寸的图像呢？@blid。。然后，我认为您需要计算手前的位置，并在
css函数中设置它们
您能提供一段代码吗？因为这段代码就是我想要的答案：）如果旋转角度是45度呢？
$('a').click(function(e) {
    e.preventDefault();
    var angle = $(this).attr("id");
    console.log("angle");
    var $container = $('#container');
    var left = 0;
    var top = 0;
    if(+angle === 90 || +angle === 270){
        top = 50;
        left = -50;
    }
    $("#my_image").css({
      transform: 'rotate('+angle+'deg)',
      '-moz-transform': 'rotate('+angle+'deg)',
      '-webkit-transform': 'rotate('+angle+'deg)',
        'top' : top + 'px',
        'left' : left + 'px'
    });
}).click();​  // Fire click on DOM ready