CSS transform:scale(2) + position:absolute + right:0px 不起作用答案

【问题标题】：CSS transform:scale(2) + position:absolute + right:0px is not workingCSS transform:scale(2) + position:absolute + right:0px 不起作用
【发布时间】：2014-09-30 04:17:56
【问题描述】：

我注意到，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;
}

谢谢。

【问题讨论】：

向我们展示 css 代码...
这对回答没有帮助....
无论如何，我已经更新了主帖。我不在乎声誉：D 因此，如果您无法在脑海中想象 3 个 css 属性，那会让我有点困惑，我来对地方了：D
上下文总是有帮助的

标签： css transform

【解决方案1】：

在你的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

【讨论】：

【解决方案2】：

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

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

Demo

【讨论】：

谢谢你，伙计。不知道变换起源。
对于大多数转换，默认为 50% 50%（中间）。