7

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

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

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

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

4

3 回答 3

9

您需要设置一个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%;
}
于 2012-09-11T09:21:51.870 回答
2

尝试

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

​</p>

于 2012-09-11T09:20:11.237 回答
0

嗨，现在习惯了这个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;
}

演示

于 2012-09-11T09:22:17.033 回答