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

Question

在我的一个网页中，我有一组按钮，当事件发生时我正在旋转，这样其中一个按钮通过transform: rotateX(90deg);消失而另一个按钮通过transform: rotateX(0deg);显示。我的按钮位于div的右侧，使用绝对位置具有100%宽度，例如position: absolute; right: 10px;

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

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

我该如何避免这种情况？

Answer 1

你应该在一个位置相对的位置添加，所以绝对有一个引用，而不仅仅是整个身体。

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

这将解决这种奇怪的行为