3D轮播

最新推荐文章于 2023-04-08 23:18:56 发布

honghong.zhou

最新推荐文章于 2023-04-08 23:18:56 发布

阅读量352

点赞数

分类专栏： html5+css3 文章标签： css3 3d

本文链接：https://blog.csdn.net/chengQunBin/article/details/78576256

版权

html5+css3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

纯css3实现3D轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
            }
            .container{
                width: 400px;
                height: 100px;
                margin: 300px auto;
                perspective: 1000px;
            }
            .img_box{
                width: 400px;
                transform-style: preserve-3d;
                position: relative;
                animation: rotate 10s infinite;
            }
            .img_box:hover{
                animation-play-state: paused;
            }
            @keyframes rotate{
                0%{
                    transform: rotateY(0deg);
                }
                16.6%{
                    transform: rotateY(60deg);
                }
                33.2%{
                transform: rotateY(120deg);
                }
                49.8%{
                    transform: rotateY(180deg);
                }
                66.4%{
                    transform: rotateY(240deg);
                }
                83%{
                    transform: rotateY(300deg);
                }
                100%{
                    transform: rotateY(360deg);
                }
            }
            img{
                position: absolute;
                width: 400px;
            }
            img:nth-child(1) { 
                transform: rotateY(0deg) translateZ(420px); 
            }
            img:nth-child(2) { 
                transform: rotateY(60deg) translateZ(420px); 
            }
            img:nth-child(3) { 
                transform: rotateY(120deg) translateZ(420px); 
            }
            img:nth-child(4) { 
                transform: rotateY(180deg) translateZ(420px); 
            }
            img:nth-child(5) { 
                transform: rotateY(240deg) translateZ(420px); 
            }
            img:nth-child(6) { 
                transform: rotateY(300deg) translateZ(420px); 
            } 

        </style>
    </head>
    <body>
        <div class="container">
            <div class="img_box" id="box">
                <img src="img/pic1.jpg" data-index="1" />
                <img src="img/pic2.jpg" data-index="2" />
                <img src="img/pic3.jpg" data-index="3" />
                <img src="img/pic4.jpg" data-index="4" />
                <img src="img/pic5.jpg" data-index="5" />
                <img src="img/pic6.jpg" data-index="6" />
            </div>
        </div>
    </body>
</html>