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，因为它的位置相对于尚未转换的元素，我们不能只设置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%;
}

Answer 2

尝试

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

Answer 3

您现在使用来使用 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;
}

的 Demo 的

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

3 个答案: