javascript - jquery绕x y轴旋转矩形

Question

我有一个矩形 div 放置在左上角，宽 200 像素，高 100%。我想在这个 div 中放置一个图像，但是该图像是横向的(w:1024 h:200)我认为旋转它没有问题，我可以做到，但我无法定位它。因此，这里需要一些帮助来定位左上角!

$('.header_rotate').css({                              
transform: 'rotate('+ -90 +'deg)',                                                                                    
backgroundColor: 'green',
height: '100%',
width: '200'                      
})

<div class="header">
  <div class="header_rotate">
      <img id="logo" src="img/Logo_Design_2048x410.png" />
  </div>
 </div>

JsFiddel

Answer 1

使用transform:rotate(90deg)，您可以添加translateX和translateY以将其定位到正确的位置。

$('.header_rotate').css({

  transform: 'translateX(-130px) translateY(200px) rotate(90deg)',
  backgroundColor: 'green',
  height: '200',
  width: '600',
});

这是 fiddle :

http://jsfiddle.net/dRvy8/2/