HTML + css 旋转文字

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

祝大家国庆节快乐

<div class="scene">
        <div class="banner">
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
        </div>
        <div class="screen"></div>
    </div>

body {
            background-color: #000;
            color: #fff;
            min-height: 100vh;
            display: grid;
            place-items: center;
            perspective: 500px;
            perspective-origin: 50% calc(50% - 150px);
        }

        .scene {
            position: relative;
            transform-style: preserve-3d;
        }

        .banner {
            display: flex;
            transform-style: preserve-3d;
            -webkit-animation: rotate 24s infinite linear;
            animation: rotate 24s infinite linear;
        }

        @-webkit-keyframes rotate {
            to {
                transform: rotateY(-360deg);
            }
        }

        @keyframes rotate {
            to {
                transform: rotateY(-360deg);
            }
        }

        .panel {
            position: absolute;
            transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(190px);
            width: 50px;
            height: 120px;
            overflow: hidden;
        }

        .panel::before {
            position: absolute;
            left: var(--left);
            content: "国庆节快乐，祝大家快乐";
            font-size: 96px;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
            color: hsl(var(--hue), 75%, 75%);
        }

        .panel:nth-child(1) {
            --left: 0px;
            --hue: 0;
            --angle: 0deg;
        }

        .panel:nth-child(2) {
            --left: -50px;
            --hue: 15;
            --angle: 15deg;
        }

        .panel:nth-child(3) {
            --left: -100px;
            --hue: 30;
            --angle: 30deg;
        }

        .panel:nth-child(4) {
            --left: -150px;
            --hue: 45;
            --angle: 45deg;
        }

        .panel:nth-child(5) {
            --left: -200px;
            --hue: 60;
            --angle: 60deg;
        }

        .panel:nth-child(6) {
            --left: -250px;
            --hue: 75;
            --angle: 75deg;
        }

        .panel:nth-child(7) {
            --left: -300px;
            --hue: 90;
            --angle: 90deg;
        }

        .panel:nth-child(8) {
            --left: -350px;
            --hue: 105;
            --angle: 105deg;
        }

        .panel:nth-child(9) {
            --left: -400px;
            --hue: 120;
            --angle: 120deg;
        }

        .panel:nth-child(10) {
            --left: -450px;
            --hue: 135;
            --angle: 135deg;
        }

        .panel:nth-child(11) {
            --left: -500px;
            --hue: 150;
            --angle: 150deg;
        }

        .panel:nth-child(12) {
            --left: -550px;
            --hue: 165;
            --angle: 165deg;
        }

        .panel:nth-child(13) {
            --left: -600px;
            --hue: 180;
            --angle: 180deg;
        }

        .panel:nth-child(14) {
            --left: -650px;
            --hue: 195;
            --angle: 195deg;
        }

        .panel:nth-child(15) {
            --left: -700px;
            --hue: 210;
            --angle: 210deg;
        }

        .panel:nth-child(16) {
            --left: -750px;
            --hue: 225;
            --angle: 225deg;
        }

        .panel:nth-child(17) {
            --left: -800px;
            --hue: 240;
            --angle: 240deg;
        }

        .panel:nth-child(18) {
            --left: -850px;
            --hue: 255;
            --angle: 255deg;
        }

        .panel:nth-child(19) {
            --left: -900px;
            --hue: 270;
            --angle: 270deg;
        }

        .panel:nth-child(20) {
            --left: -950px;
            --hue: 285;
            --angle: 285deg;
        }

        .panel:nth-child(21) {
            --left: -1000px;
            --hue: 300;
            --angle: 300deg;
        }

        .panel:nth-child(22) {
            --left: -1050px;
            --hue: 315;
            --angle: 315deg;
        }

        .panel:nth-child(23) {
            --left: -1100px;
            --hue: 330;
            --angle: 330deg;
        }

        .panel:nth-child(24) {
            --left: -1150px;
            --hue: 345;
            --angle: 345deg;
        }

        .screen {
            position: absolute;
            width: 400px;
            height: 400px;
            background-image: linear-gradient(90deg, #000a, #0004, #000a);
            transform: translate(-50%, -50%);
        }