CSS变换缩放滚动问题

Question

我正在创建一个使用CSS＆＃39;变换规模属性。如下图所示，我在一个容器内部有一个物体，它很好地贴合在里面，没有任何溢出的内容。这就是我希望的样子。

当我将对象重新缩放到大于容器的大小时，我的问题出现了。如图所示，显然对象大于容器。由＆＃34;可滚动区域＆＃34;的箭头和标签标记，容器可以滚动到这些区域，但标有＆＃34;隐藏＆＃34;的部分。由于它们溢出而无法通过滚动显示或访问。

有关我的问题的实际观点，这里是使用我的代码链接到codepen：

CodePen

我的CSS代码区域的片段如下：

#container {
  position: fixed;
  width: 300px;
  height: 200px;
  border: 1px solid #000000;
  left: 0px;
  top: 0px;
  margin-left: 330px;
  margin-top: 10px;
  overflow: scroll;
  display: block;
  text-align: center;
}

#object {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  background-color: rgba(255, 0, 255, 0.45);
  margin-top: 40px;
  border-radius: 25px;
  transform: scale(3); /* This would be scale(1) on the small object */
}

这个问题阻碍了我的网络应用程序的开发，所以提前感谢您的时间和贡献。

Answer 1

我最好的猜测是因为变换起源而发生这种情况。尝试将其设置为0 0，以解决您的问题：

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background-color: rgba(255, 0, 255, 0.45);
  border-radius: 25px;
  transform: scale(3);
  transform-origin: 0 0;
}

演示codepen