Блог

На одной из моих веб-страниц у меня есть набор кнопок, которые я поворачиваю, когда происходит событие, так что одна из кнопок исчезает при выполнении transform: rotateX(90deg); , а другая появляется при выполнении transform: rotateX(0deg); . У меня есть кнопки, расположенные в правой части div, 100% ширина которых определяется с использованием абсолютной позиции, например position: absolute; right: 10px;

Когда кнопки не перемещаются, кнопки отображаются правильно и отображаются с правой стороны в 10 пикселях от правой стороны страницы. Однако при переходе поля, по-видимому, перемещаются внутрь еще на 10 пикселей, как если бы я добавил поле на 10 пикселей вправо.

Хотя это не самый приятный визуально, вот пример jsFiddle. Как показано, розовая кнопка находится в 10 пикселях справа, но красная повернутая кнопка находится еще на 10 пикселов правее.

Как я могу этого избежать?

Вы должны добавить где-нибудь относительную позицию, чтобы у абсолюта была ссылка, а не только все тело.

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

Это исправит это странное поведение