zoukankan      html  css  js  c++  java
  • 旋转木马

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                body{
                    background-color:black;
                }
                *{
                    margin: 0;
                    padding: 0;
                }
                #main img{
                    margin-top: 100px;
                    300px;
                    height: 400px;
                    position: absolute;
                    border:2px solid pink;
                }
                #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;/*让父元素居中*/
                     300px;
                    height: 400px;
                    /*声明一个3D空间*/
                    transform-style: preserve-3d;
                    transform: rotateX(-10deg);
                    animation-name: animate;
                    animation-duration: 60s; /*动画执行次数*/
                    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="./1.jpg" alt="">
                <img src="./2.jpg" alt="">
                <img src="./3.jpg" alt="">
                <img src="./4.jpg" alt="">
                <img src="./5.jpg" alt="">
                <img src="./6.jpg" alt="">
                <img src="./7.jpg" alt="">
                <img src="./8.jpg" alt="">
                <img src="./9.jpg" alt="">
            </div>
        </body>
    </html>
  • 相关阅读:
    “TensorFlow 开发者出道计划”全攻略,玩转社区看这里!
    魔改合成大西瓜
    自定义注解!绝对是程序员装逼的利器!!
    Python中的join()函数的用法
    Python中的split()函数的用法
    linux 完全卸载mysql数据库
    域名被盗后还能不能找回
    在选择域名后缀时应该考虑到的问题
    什么叫域名劫持 和域名解析有什么区别
    河北重大技术需求系统04
  • 原文地址:https://www.cnblogs.com/KoBe-bk/p/14980034.html
Copyright © 2011-2022 走看看