CSS 旋转变换导致绝对定位的边距问题

Question

在我的一个网页中，我有一组按钮在事件发生时旋转，这样其中一个按钮通过执行 transform: rotateX(90deg); 和另一个按钮消失通过执行 transform: rotateX(0deg); 出现。我使用绝对位置将按钮放置在宽度为 100% 的 div 的右侧，例如position:absolute；右:10px;

当按钮未转换时，按钮会正确显示并显示在距页面右侧 10 像素的右侧。但是，在过渡时，边距似乎向内移动了额外的 10 个像素，就好像我向右添加了 10 个像素的边距一样。

虽然这不是最令人赏心悦目的，here is a jsFiddle example .如图所示，粉色按钮距右侧 10 像素，但红色旋转按钮距右侧额外 10 像素。

我怎样才能避免这种情况？

Answer 1

你应该在某个地方添加一个相对位置，所以绝对有一个引用而不仅仅是整个 body 。

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

这将解决奇怪的行为