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 ?
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>