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

Question

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

当我执行此操作时，浏览器（IE 和 Chrome）拒绝将其进一步移动到顶部，space 始终有几个像素留在顶部。如果我将 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 解决了这个问题，或者更确切地说，首先是什么原因造成的？

Answer 1

进一步@Paulie_D 只需在图像中添加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>

Answer 2

图像是 inline 元素，并且会受到类似文本的考虑。文本基线下通常有 space 以说明字符的后裔。

将图像设置为 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>

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

transform: rotate on <img> with negative margin

html

css

css-transforms