css3旋转木马效果

切图仔

发布于 2022-09-08 08:19:27

1.4K00

代码可运行

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style>
            body{
                perspective: 1000px;
            }
            section{
                width: 300px;
                height: 200px;
                margin: 150px auto;
                position: relative;
                transform-style: preserve-3d;
                animation: rotate 20s linear infinite;
            }
            section:hover{
                animation-play-state: paused;
            }
            section div{
                width: 100%;
                height: 100%;
                position: absolute;
                top:0;
                left:0;
                background:url('./1.jpg')  no-repeat;
            background-position: center center
            }
            section div:nth-child(1){
                transform:rotateY(0)  translateZ(300px);
            }
            section div:nth-child(2){
                transform: rotateY(60deg) translateZ(300px);
            }
            section div:nth-child(3){
                transform: rotateY(120deg) translateZ(300px);
            }
            section div:nth-child(4){
                transform: rotateY(180deg) translateZ(300px);
            }
            section div:nth-child(5){
                transform: rotateY(240deg) translateZ(300px);
            }
            section div:nth-child(5){
                transform: rotateY(300deg) translateZ(300px);
            }    
            @keyframes rotate{
                0%{
                    transform: rotateY(0);
                }
                100%{
                    transform: rotateY(360deg);
                }
            }

        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
</html>