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?

Css html5 javascript
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.

Previous: In react, the video element is obtained through createRef, and the first print is null?

Next: After the transform3D is converted to the back in ios safari, the content on the back is not displayed

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1e788fe-6eb.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-1e788fe-6eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?