CSS变换缩放滚动问题

Question

我正在创建一个使用CSS'变换比例属性的Web应用程序.如下图所示,我在一个容器内部有一个物体,它很好地贴合在里面,没有任何溢出的内容.这就是我希望的样子.

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

为了实际查看我的问题,这里有一个使用我的代码链接到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;
}

演示代码