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

【问题标题】：CSS rotation transform causing margin issues with absolute positioningCSS 旋转变换导致绝对定位的边距问题
【发布时间】：2014-06-21 07:15:24
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css css-position css-transforms

【解决方案1】：

你应该在某处添加一个相对位置，所以绝对位置有一个参考，而不仅仅是整个身体。

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

这将解决这种奇怪的行为

【讨论】：