Javascript 如何在容器中定位旋转图像？

使用CSS3、HTML（以及javascript/jquery，如果需要的话），我需要将图像旋转90/270度，并将其放置在填充其父div/container的位置。听起来很简单，但当图像旋转时，位置会发生变化，我不知道如何或为什么

这里有一个jsFiddle来解释——我只希望蓝色徽标正好位于红色div中

当然，我可以使用特定的偏移量，但是如果使用不同的图像，这些偏移量会改变，所以我真的想找到一个通用的解决方案

任何帮助都会很棒，谢谢

试试看

#image {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
    position : relative;
    top      : -50px;
}

​

您需要设置一个-在这种情况下，图像围绕该点旋转

#image {
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0; //initially 50% 50%
  margin-left: 100%;
}

/

更新：

后者的挑战是，我们不能真正修改

变换原点

，因为它的位置相对于尚未变换的元素，我们不能只设置

边距顶部：100%

，因为边距值（即使是垂直的）计算为。以下代码应该可以工作：

#image {
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  position:relative;
  top:100%;
}

---

您好，现在已使用此css已使用位置

#wrapper {
    width:50px;
    height:150px;
    border:2px solid red;
    position:relative;
}
#image {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    position:absolute;
    left:-49px;
    top:50px;
}

---

我想你想要这个，我更喜欢你的解决方案：+1。它不依赖于图像大小+1。也许还值得一提的是，

transform origin

的初始值是

50%50%

。啊，但是如果我将其旋转270度，溶液就会破裂。如果旋转90度或270度，是否有一种方法可以将其装入红色容器内？如果答案是“不”，那很好+1，如果能使其更通用（即不依赖像素尺寸）