CSS实现旋转日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="two.css"> -->
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="text" style="--j:0">
            <span style="--i:0">2</span>
            <span style="--i:1">3</span>
            <span style="--i:2">4</span>
            <span style="--i:3">5</span>
        </div>
        <div class="text" style="--j:1">
            <span style="--i:0">2</span>
            <span style="--i:1">1</span>
            <span style="--i:2">2</span>
            <span style="--i:3">3</span>
        </div>
        <div class="text" style="--j:2">
            <span style="--i:0">2</span>
            <span style="--i:1">3</span>
            <span style="--i:2">4</span>
            <span style="--i:3">5</span>
        </div>
        <div class="text" style="--j:3">
            <span style="--i:0">2</span>
            <span style="--i:1">4</span>
            <span style="--i:2">5</span>
            <span style="--i:3">6</span>
        </div>
    </div>

    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #3d3d3d;
    }
    .container .text{
        color: #fff;
    }

    .container{
        display: flex;
        gap: 10px;
    }
    .container .text{
        position: relative;
        width: 100px;
        height: 100px;
    }

    .container .text span{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(#434343,#535353);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4em;
        font-weight: 700;
        font-family: 黑体;
        color: #fff;
    }

    .container{
        transform:  rotateY(30deg) rotateX(10deg);
    }
    .container{
            transform-style: preserve-3d;
    }
    .container .text span{
        transform: rotateX(calc(90deg*var(--i))) translateZ(50px);
    }

    .container .text::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #373737;
        transform-origin: left;
        transform: rotateY(90deg) translateX(-50px);
    }
    .container .text:last-child span{
        background: linear-gradient(#29c040,#32ed4e);
        color: #333;
    }
    .container .text:last-child::before{
        background: #29ab3c;
    }

    .container .text{
        transition: 2.5s ease-in-out;
    }
    .container:hover .text{
        transform:rotateX(-360deg);
    }
    .container:hover .text:last-child{
        transform: rotateX(630deg);
    }
    .container .text{
        transition-delay: calc(0.25s*var(--j));
    }
    </style>
</body>
</html>
猜你喜欢
