变换：以负边距在 <img> 上旋转答案

【问题标题】：transform: rotate on <img> with negative margin变换：以负边距在 <img> 上旋转
【发布时间】：2025-11-20 18:00:07
【问题描述】：

我尝试围绕右下角旋转图像，然后使用负边距将其移回原点。

当我这样做时，顶部总是有几个像素的空间，浏览器（IE 和 Chrome）拒绝进一步移动它。如果我将position: absolute 分配给图像，它将被正确定位。

这是一个最小的例子：https://jsfiddle.net/ny0rm75b/

<div>
  <img src="http://placehold.it/600x300">
</div>

<div class="fixed">
  <img class="fixed" src="http://placehold.it/600x300">
</div>

css:

div{
  width:600px;
  height: 300px;
  box-sizing: content-box;
  border: 5px solid orange;
  margin: 15px;
}

img{
  transform-origin: 600px 300px;
  transform: rotate(180deg);
  margin-left: -600px;
  margin-top: -300px;

}

div.fixed{
  position: relative;
}
img.fixed{
  position:absolute;
}

为什么position: absolute 会解决这个问题，或者更确切地说，这是什么原因造成的？

【问题讨论】：

答案是因为图像需要为display:block...以考虑空白和行高。 - jsfiddle.net/d3mhdz6c
修复了这个问题。你能用 display: block in an answer详细说明你的评论吗？
图像是内联元素，需要考虑类似于文本的因素。文本基线下通常有空间来说明字符的下降。将图像设置为display:block 会阻止它内联...就像使用position:absolute 一样。 - 见*.com/questions/5804256/…
我明白了，这是有道理的。如果您将此作为答案发布，我会接受。

标签： html css css-transforms

【解决方案1】：

图像是inlineelements，并受到类似文本的考虑。文本基线下通常有空间来说明字符的下行。

将图像设置为 display:block 会阻止它内联...就像使用 position:absolute 一样。

div{
  width:600px;
  height: 300px;
  box-sizing: content-box;
  border: 5px solid orange;
  margin: 15px;
}

img{
  transform-origin: 600px 300px;
  transform: rotate(180deg);
  margin-left: -600px;
  margin-top: -300px;
  display: block;

}

<div>
  <img src="http://placehold.it/600x300">
</div>

也就是说，根本没有真正的理由使用边距（在这种情况下）......并且通过简单的 180 度旋转也不需要块修复。

div {
  width: 600px;
  height: 300px;
  box-sizing: content-box;
  border: 5px solid orange;
  margin: 15px;
}
img {
  transform: rotate(180deg);
}

<div>
  <img src="http://placehold.it/600x300">
</div>

【讨论】：

在我的生产代码中这样做是有原因的 :)

【解决方案2】：

进一步@Paulie_D comment 只需将display:block 添加到图像中：

div{
  width:600px;
  height: 300px;
  box-sizing: content-box;
  border: 5px solid orange;
  margin: 15px;
}

img{
  transform-origin: 600px 300px;
  transform: rotate(180deg);
  margin-left: -600px;
  margin-top: -300px;
  display:block;
}

div.fixed{
  position: relative;
}
img.fixed{
  position:absolute;
}

<div>
  <img src="http://placehold.it/600x300">
</div>

<div class="fixed">
  <img class="fixed" src="http://placehold.it/600x300">
</div>

【讨论】：