CODEWITHSUNDEEP
csscss-positioncss-transforms
josh
josh

Reputation: 10348

CSS rotation transform causing margin issues with absolute positioning

In one of my web pages, I have a set of buttons I'm rotating when an event happens, such that one of the buttons disappears by doing transform: rotateX(90deg); and another appears by doing transform: rotateX(0deg);. I have the buttons positioned on the right side of a div that has 100% width using absolute position, e.g. position: absolute; right: 10px;

When the buttons are not transitioning, the buttons appear correctly and appear on the right side 10 pixels from the right side of the page. However, when transitioning, the margins appear to move inwards an additional 10 pixels as if I added a margin of 10 pixels to the right.

While this isn't the most visually pleasing, here is a jsFiddle example. As is shown, the pink button is 10 pixels from the right, but the red rotated button is an additional 10 pixels to the right.

How can I avoid this?

Upvotes: 2

Views: 3080

Answers (1)

fernandopasik
fernandopasik

Reputation: 10483

You should add somewhere a position relative, so the absolute has a reference and not just the whole body.

.buttons {
  width: 100%;
  position: relative;
}

That will fix that weird behaviour

Upvotes: 2

Related Questions