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

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

90度小提琴 / 270度小提琴

更新:

后者面临的挑战是我们无法真正修改,transform-origin因为它的位置相对于尚未转换的元素,我们不能只设置,margin-top:100%因为边距值(甚至是垂直值)计算为相对于宽度的百分比.包含块.以下代码应该有效:

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

Answer 2

尝试与

\n\n

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

\n\n

\xe2\x80\x8b

\n