翻书的效果_翻书效果

<html>

<head>
    <meta charset="utf-8">

    <style>
        * {
            box-sizing: border-box;
        }
        
        .contain {
            width: 1000px;
            height: 800px;
            perspective: 1000px;
            margin: 100px;
        }
        
        .book {
            width: 500px;
            height: 800px;
            position: relative;
            float: right;
            transform-style: preserve-3d;
        }
        
        .front {
            backface-visibility: hidden;
            height: 800px;
            width: 500px;
            background: linear-gradient(to bottom right, #fff, rgba(0, 0, 0, 1));
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
        .back {
            backface-visibility: hidden;
            transf