transform: rotate on with negative margin

Question

I try to rotate an image around the bottom right corner and then move it back up to the origin using negative margin.

When I do this, there is always a few pixels of space left to the top that the browser (both IE and Chrome) refuse to move it further. If I assign position: absolute to the image, it will get positioned correctly.

Here is a minimal example: 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;
}

Why does position: absolute fix this issue, or rather, what is the cause of this in the first place?

The answer is because the image needs to be `display:block`...to account for whitespace and lineheight. - https://jsfiddle.net/d3mhdz6c/ — Paulie_D, Jul 20 '16 at 09:01
fixed the question. Can you elaborate your comment with display: block in an answer? — Manuel Schweigert, Jul 20 '16 at 09:07
Images are inline elements and are subject to text-like considerations. There is usually space under the text baseline to account for descenders on characters.. Setting the image to `display:block` stops it being inline...as does using `position:absolute`. - See http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image — Paulie_D, Jul 20 '16 at 09:14
I see, that makes sense. If you post this as answer I will accept it. — Manuel Schweigert, Jul 20 '16 at 09:26

score 0 · Answer 1 · edited May 23 '17 at 12:32

Further @Paulie_D comment just add display:block to the image:

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>

score 0 · Accepted Answer · answered Jul 20 '16 at 09:37

Images are inlineelements and are subject to text-like considerations. There is usually space under the text baseline to account for descenders on characters.

Setting the image to display:block stops it being inline...as does using 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>

That said, there is no real reason to use margins at all (in this instance)...and the block fix isn't necessary with a simple 180 deg rotation.

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>

There is a reason to do it this way in my production code :) — Manuel Schweigert, Jul 20 '16 at 09:43

transform: rotate on with negative margin

2 Answers2