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

Answer 2

在你的css中添加：

-ms-transform: scale(3); /* IE 9 */
-webkit-transform: scale(3); /* Chrome, Safari, Opera */

完整代码：

#stick_me {
    border:1px solid red;
    display:inline-block;
    transform:scale(3);
    -ms-transform: scale(3); /* IE 9 */
    -webkit-transform: scale(3); /* Chrome, Safari, Opera */
    position:absolute;
    right:0px;
    top:0px;
}

<强> DEMO

CSS变换：scale（2）+ position：absolute + right：0px不起作用

2 个答案: