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

【问题标题】：How can I position a rotated image within a container?如何在容器中定位旋转图像？
【发布时间】：2012-09-11 09:16:39
【问题描述】：

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

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

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

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

【问题讨论】：

我想你想要这个jsfiddle.net/UPGkU/5

标签： javascript jquery html css

【解决方案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%;
}

【讨论】：

我更喜欢你的解决方案：+1。它不依赖于图像大小
+1。或许还值得一提的是transform-origin 的初始值为50% 50%。
啊，但是如果我将它旋转 270 度，解决方案就会中断。如果旋转 90 度或 270 度，是否可以将其放入红色容器中？如果答案是“不”，那很好！

【解决方案2】：

试试

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

【讨论】：

+1，如果这可以更通用（即不依赖像素尺寸）

【解决方案3】：

你好现在used到这个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;
}

Demo

【讨论】：