The picture is similar to the calendar flip effect animation?

A picture similar to the following effect is flipped. Swiping down is the previous one, and sliding up is the next one:

how to solve this?

Jun.20,2022

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        .card {
            width: 200px;
        }
        
        .box {
            position: relative;
            perspective: 1000px;
        }
        
        .box .slide {
            width: 100%;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .box .slide img {
            width: 100%;
            height: 100%;
        }
        
        .box .slide {
            opacity: 1;
            transform: translateY(0) rotateX(0);
            transition: all 1s ease-in-out 0s;
        }
        
        .box .slide.active {
            transform: translateY(-100%) rotateX(90deg);
            transform-origin: top bottom;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="container mt50">
            <div class="row">
                <div class="card">
                    <div class="box">
                        <!-- <div class="slide">
                            <img src="http://www.17sucai.com/preview/576956/2017-09-23/css3%E5%9B%BE%E7%89%87%E5%9E%82%E7%9B%B4%E6%97%8B%E8%BD%AC/img/1.jpg" alt="">
                        </div>
                        <div class="slide active">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=48db07945dcd6c71e27f3bebeeb0e36d&src=http://pic1.nipic.com/2008-11-12/200811121148786_2.jpg" alt="">
                        </div> -->
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script>
    var imgArr = [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=f1295729d4ba529c8e2227ec1c980185&src=http://pic29.nipic.com/20130527/8786105_130215865000_2.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=5362861dc9a14f6995ee9407299f1289&src=http://img.juimg.com/tuku/yulantu/110322/8880-11032219110663.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=48db07945dcd6c71e27f3bebeeb0e36d&src=http://pic1.nipic.com/2008-11-12/200811121148786_2.jpg'
    ]
    var str = '';
    var index = imgArr.length - 1;
    for (let i = imgArr.length - 1; i >= 0; i--) {
        const element = imgArr[i];
        str += '<div class="slide">' + '<img src="' + element + '">' + '</div>'
    }
    $('.box').append(str);

    $(".box").on("touchstart", function(e) {
        e.preventDefault();
        console.log('touchstart')
        startX = e.originalEvent.changedTouches[0].pageX, 
            startY = e.originalEvent.changedTouches[0].pageY;
    });
    $(".box").on("touchmove", function(e) {
        console.log('touchmove:')

    });
    $(".box").on("touchend", function(e) {
        console.log('touchend')
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX, 
            moveEndY = e.originalEvent.changedTouches[0].pageY, 
            X = moveEndX - startX, 
            Y = moveEndY - startY;

        
        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            console.log("");
        }
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            console.log("");
        }
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            console.log("");
            if (index < (imgArr.length - 1)) {
                console.log('index:' + index);
                index = index + 1;
                $('.box .slide').eq(index).removeClass('active');
            }
        }
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            console.log(":" + index);

            if (index > 0) {
                $('.box .slide').eq(index).addClass('active');
                index = index - 1;

            }
        }
        else {
            console.log("just touch");
        }
    })
</script>

</html>

has been solved, but the animation effect still feels a little stiff and not as stiff as others, to see if there are any experts to improve.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a960-2c20e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a960-2c20e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?