CSS 变换 :scale(2) + position:absolute + right:0px is not working

Question

我注意到 right:0px 定位元素不正确。 transform:scale 不会重新计算元素宽度。

有没有办法把这个元素正确地粘在右边？

HTML:

<div id="stick_me">
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah<br />
</div>

CSS:

#stick_me {
    border: 1px solid red;
    display: inline-block;
    transform: scale(3);
    position: absolute;
    right: 0px;
    top: 0px;
}

Answer 1

您想使用 transform-origin ( https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin ) 属性设置为 top right。当您将元素定位到顶部和右侧时，您需要它从那里开始缩放，即向下和向左。

#stick_me {
  border:1px solid red;
  display:inline-block;
  transform:scale(3);
  position:absolute;
  right:0px;
  top:0px;
  transform-origin:top right;
}

Demo