CSS变换:scale(2)+ position:absolute + right:0px不起作用

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;
}

演示