如何在容器中定位旋转的图像？ [英] How can I position a rotated image within a container?

问题描述

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

这里是一个jsFiddle解释 - http://jsfiddle.net/UPGkU/2/ - 我只想让蓝色标志位于正确的红色div 。

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

解决方案

任何帮助都是太棒了， a href =https://developer.mozilla.org/en-US/docs/CSS/transform-origin =noreferrer> transform-origin - 在这种情况下，图像旋转的点。

  #image {
 -webkit- transform：rotate（90deg）; 
 -webkit-transform-origin：0 0; //最初50％50％
 margin-left：100％; 
} 
  

90deg fiddle / 270deg fiddle

更新：

是因为我们不能真正修改 transform-origin ，因为它的位置是相对于尚未变换的元素，我们不能设置 margin-top：100％，因为边距值（即使是垂直的）计算为总是相对于包含块的宽度的百分比。以下代码应该工作：

  #image {
 -webkit-transform：rotate（-90deg）; 
 -webkit-transform-origin：0 0; 
 position：relative; 
 top：100％; 
} 
  

Using CSS3, HTML (and javascript/jquery if needed), I need to rotate an image 90/270 degrees and have it position to fill its parent div/container. Sounds simple, but when images are rotated, there positioning changes and I can't figure out how or why.

Here is a jsFiddle to explain - http://jsfiddle.net/UPGkU/2/ - I just want the blue logo to be position exactly within the red div.

Of course, I could use specific offsets, but if a different image is used, those offsets change, so I really want to find a generic solution.

Any help would be fantastic, thanks!

解决方案

You need to set a transform-origin - in this scenario, a point around which the image gets rotated.

#image {
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0; //initially 50% 50%
  margin-left: 100%;
}

90deg fiddle / 270deg fiddle

Update:

The challenge with the latter is that we can't really modify transform-origin as its position is relative to the not yet transformed element and we can't just set margin-top:100% since margin values (even vertical ones) are calculated as a percentage always relative to the width of the containing block. The following code should work:

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

这篇关于如何在容器中定位旋转的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！