CSS：“变换：比例（）；”的位置错误容器儿童答案

【问题标题】：CSS: Wrong position of "transform: scale();" container childrenCSS：“变换：比例（）；”的位置错误容器儿童
【发布时间】：2013-09-27 10:27:30
【问题描述】：

我有一个内容很长的容器元素，它被缩放了：

.container {
  transform: scale(0.9);
}

在这个容器中，我有一个孩子div，它曾经是一个弹出窗口。它的绝对位置与顶部50%

.popup {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

但不幸的是，当容器被缩放时，50% 不起作用。如果~240% 出现在页面底部，我需要使用它。

你现在有一些关于在缩放元素的子元素上应用定位的细节吗？

演示： http://labs.voronianski.com/test/scaled-positioning.html

【问题讨论】：

【解决方案1】：

添加到.wrap:

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-origin: 0 0;
}

您需要重新定位 .popup（现在参考框架是 .wrap，而不是 html 元素），但在 Chrome 中，缩放切换在此更改后可以正常工作。

【讨论】：