HTML+CSS旋转木马效果

最新推荐文章于 2023-08-02 19:52:27 发布

weixin_34332905

最新推荐文章于 2023-08-02 19:52:27 发布

阅读量1.4k

点赞数 1

原文链接：http://www.cnblogs.com/zmsister/p/6567785.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                background-color:black;
            }
            *{
                margin: 0;
                padding: 0;
            }
            #main img{
                width:300px;
                height: 400px;
                position: absolute;
                border:5px green double;
            }
            #main img:nth-child(1){
                transform: translateZ(500px);
            } 
            #main img:nth-child(2){
                transform: rotateY(40deg) translateZ(500px);
            }
            #main img:nth-child(3){
                transform: rotateY(80deg) translatez(500px);
            }
            #main img:nth-child(4){
                transform: rotateY(120deg) translatez(500px);
            }
            #main img:nth-child(5){
                transform: rotateY(160deg) translatez(500px);
            }
            #main img:nth-child(6){
                transform: rotateY(200deg) translatez(500px);
            }
            #main img:nth-child(7){
                transform: rotateY(240deg) translatez(500px);
            }
            #main img:nth-child(8){
                transform: rotateY(280deg) translatez(500px);
            }
            #main img:nth-child(9){
                transform: rotateY(320deg) translatez(500px);
            }
            
            /*# id选择器   id不能重复命名*/
            #main{
                margin: 100px auto;/*让父元素居中*/
                width: 300px;
                height: 400px;
                /*声明一个3D空间*/
                transform-style: preserve-3d;
                transform: rotateX(-10deg);
                animation-name: animate;
                animation-duration: 10s; /*动画执行次数*/
                animation-iteration-count: infinite; /*动画持续时间：无限 */
                animation-timing-function: linear;
                position: relative;
            }
            
            /*定义一个动画*/
            @keyframes animate {
                0%{
                    transform: rotateX(-10deg) rotateY(0deg) ;
                }
                100%{
                    transform: rotateX(-10deg) rotateY(360deg) ;
                }
            }
        </style>
    </head>
    <body>
        <div id="main">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" />
            <img src="img/6.jpg" />
            <img src="img/7.jpg" />
            <img src="img/8.jpg" />
            <img src="img/9.jpg" />
        </div>
    </body>
</html>