旋转的走马灯

逃离我推掉我的手 2023-06-25 07:49 17阅读 0赞

效果如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

## 直接拷贝代码吧，就能看到效果啦~~~~~ ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Animation Test</title>
        <style>
            *{margin:0;padding:0;}
            @-webkit-keyframes rotation{
                0%{-webkit-transform:rotateY(0deg);}
                100%{-webkit-transform:rotateY(-360deg);}
            }
            .wapper{
                -webkit-perspective:800;
                -webkit-perspective-origin:50% -100%;
                width:400px;
                height:300px;
                margin:100px auto;
            }
            .rotate{
                -webkit-transform-style:preserve-3d;
                -webkit-animation: rotation 6s infinite;
                -webkit-animation-timing-function: linear;
                -webkit-transform-origin:center;
                width:100%;
                height:100%;
                position:relative;
            }
            .item{
                -webkit-transform-origin:center;
                width:198px;
                height:300px;
                position:absolute;
                background:none;
                text-align:center;
                line-height:300px;
            }
            .itemOne{
                left:-50px;
                -webkit-transform:translateZ(87px) rotateY(-60deg);
                background:#f00;
            }
            .itemTwo{
                left:100px;
                -webkit-transform:translateZ(173px);
                background:#ff0;
            }
            .itemThree{
                left:250px;
                -webkit-transform:translateZ(87px) rotateY(60deg);
                background:#0ff;
            }
            .itemFour{
                left:250px;
                -webkit-transform:translateZ(-87px) rotateY(120deg);
                background:#0f0;
            }
            .itemFive{
                left:100px;
                -webkit-transform:translateZ(-173px) rotateY(180deg);
                background:#0ff;
            }
            .itemSix{
                left:-50px;
                -webkit-transform:translateZ(-87px) rotateY(-120deg);
                background:#00f;
            }
            .rotate:hover{
                -webkit-animation-play-state:paused;
            }
        </style>
    </head>
    <body>
    <div class="wapper">
        <div class="rotate">
            <div class="item itemOne">1</div>
            <div class="item itemTwo">2</div>
            <div class="item itemThree">3</div>
            <div class="item itemFour">4</div>
            <div class="item itemFive">5</div>
            <div class="item itemSix">6</div>
        </div>
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227093145893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70