javascript - 如何在容器中放置旋转图像？

Question

使用 CSS3、HTML(如果需要，还可以使用 javascript/jquery)，我需要将图像旋转 90/270 度并使其定位以填充其父 div/容器。听起来很简单，但是当图像旋转时，位置会发生变化，我无法弄清楚如何或为什么。

这里有一个jsFiddle来解释- http://jsfiddle.net/UPGkU/2/ - 我只希望蓝色标志正好位于红色 div 内。

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

任何帮助都会很棒，谢谢!

Answer 1

你需要设置一个transform-origin - 在这种情况下，图像围绕其旋转的点。

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

90deg fiddle/270deg fiddle

更新:

后者的挑战在于我们不能真正修改 transform-origin，因为它的位置是相对于 not yet transformed 元素的，我们不能只是设置 margin-top:100% 因为边距值(即使是垂直的)被计算为 a percentage always relative to the width of the containing block .以下代码应该有效:

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