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

How can I position a rotated image within a container?

本文关键字：定位 旋转 图像      更新时间：2023-09-26

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

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

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

任何帮助都将是美妙的，谢谢！

您需要设置一个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%;
}

尝试

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

​

Hi now已使用到此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;
}

演示

相关文章：