3D轮播

来源：互联网发布：认字软件哪个好编辑：程序博客网时间：2024/05/02 00:05
纯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>
阅读全文
0 0