放大对象直到它通过 css/html

Question

我想放大一个圆圈(div)直到它通过"camera"。我尝试过透视，但那没有用。至少我使用它的方式。这是我的 HTML:

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

这是我的 css:

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

有办法吗？

Answer 1

使用

transform: scale(1.5, 1.5);

Answer 2

请尝试

.test:hover{
 transform: scale(1.5);
}

<div class="test"></div>

Answer 3

这是无需任何 js 即可完成的方法。但是要注意，根据自己的项目调整 .wraper 高度。

例如这个属性有助于删除滚动条：

overflow: hidden;

同样重要的是，父 div 需要相对位置，子 div - 绝对。

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

放大对象直到它通过 css/html

Zoom into object until it passes css/html

html

css

animation

zooming

perspective