使用 CSS3、HTML(如果需要,还可以使用 javascript/jquery),我需要将图像旋转 90/270 度并使其定位以填充其父 div/容器。听起来很简单,但是当图像旋转时,位置会发生变化,我无法弄清楚如何或为什么。
这里有一个jsFiddle来解释- http://jsfiddle.net/UPGkU/2/ - 我只希望蓝色标志正好位于红色 div 内。
当然,我可以使用特定的偏移量,但如果使用不同的图像,这些偏移量会发生变化,所以我真的很想找到一个通用的解决方案。
任何帮助都会很棒,谢谢!
最佳答案
你需要设置一个transform-origin
- 在这种情况下,图像围绕其旋转的点。
#image {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 0 0; //initially 50% 50%
margin-left: 100%;
}
更新:
后者的挑战在于我们不能真正修改 transform-origin
,因为它的位置是相对于 not yet transformed 元素的,我们不能只是设置 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%;
}
关于javascript - 如何在容器中放置旋转图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12366458/