Question

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

当我这样做时，浏览器（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解决了这个问题，或者更确切地说，这首先是什么原因？

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

图片是inline元素，并且受到类似文本的考虑。文本基线下通常有空间来说明角色的下降。

将图像设置为display:block会使其停止内联...就像使用position：absolute。

一样

＆＃13;

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;

}

＆＃13;

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

＆＃13;

也就是说，根本没有理由使用边距（在这种情况下）......并且只需要180度旋转就可以进行块修复。

＆＃13;

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

＆＃13;

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

＆＃13;

变换：使用负边距在<img/>上旋转

2 个答案: