css翻页效果

首先要注意翻页幅度大小，然后加上时间轴，非常简单的操作下面演示

css：

display: block;
padding-bottom: 89.453125%;
position: relative;
overflow: hidden;
border-radius: 5px;
transform-origin: top;
box-shadow: 0 3px 3px rgb(48 52 63 / 20%);
transition: transform .35s,background-color .1s ease .25s;

下一级css

position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: .35s;

伪态css

transform: translateY(-50px) rotateX(45deg);
opacity: .3;
transition: transform .35s,background-color .1s ease .25s;