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

Question

使用CSS3、HTML（如果需要，还可使用javascript/jquery），我需要将一张图片旋转90/270度，并使其定位以填充其父div/container。听起来很简单，但当图像旋转时，它们的定位会改变，我无法弄清楚如何或为什么会这样。

这里有一个jsFiddle来解释 - http://jsfiddle.net/UPGkU/2/ - 我只想让蓝色的标志在红色的div中精确地定位。

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

任何帮助都将是fantastic的，谢谢！

- Tom Carnell

---

我认为你需要这个：http://jsfiddle.net/UPGkU/5/ - Rohit Azad Malik

Answer 1

您需要设置一个transform-origin- 在这种情况下，这是图像旋转的中心点。

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

90度弯曲 / 270度弯曲

更新：

后者的挑战在于，我们无法真正修改transform-origin，因为它的位置是相对于尚未变换的元素的，并且我们不能只设置margin-top:100%，因为即使是垂直的，边距值（甚至是垂直的）也总是相对于包含块的宽度计算百分比。以下代码应该可以工作：

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

- Oleg

---

我更喜欢你的解决方案：+1。它不依赖于图像大小。 - Fabrizio Calderan

也许值得一提的是，transform-origin 的初始值为 50% 50%。 - Ana

啊，但如果我把它旋转270度，则解决方案会被破坏。如果将其旋转90度或270度后，是否有一种方式可以使其适合红色容器？ 如果答案是否定的，那没关系！ - Tom Carnell

Answer 2

尝试使用

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

​

- Fabrizio Calderan

---

+1，如果这可以更通用化（即不依赖像素尺寸），那就更好了。 - Oleg

Answer 3

嗨现在用这个css使用position

#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;
}

演示

- Rohit Azad Malik