Zoom into object until it passes css/html

I want to zoom into a circle(div) until it passes the "camera". I've tried perspective, but that didn't work. At least the way I used it. Here is my HTML:

:<html>
  <body>
    <div class="test"></div>
  </body>
</html>

Here is my css:

.test{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:2px solid coral;
  width:100px;
  height:100px;
  border-radius:50%;
}

Is there a way to do this ?

Solution

This is way how you can do it without any js. But pay attention, adapt .wraper height for your own project.

For example this property helps to remove scrollbars:

overflow: hidden;

Also it's important that parent div need to be relative position and child div - absolute.

.wraper {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.circle {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
  border-radius: 50%;
  border: 2px solid #000;
  animation-name: example;
  animation-duration: 15s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes example {
  0%   {width: 30px; height: 30px;}
  100% {width: 3000px; height: 3000px;}
}

<div class="wraper">
  <div class="circle">
  </div>
</div>