第三次作业 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>立体相册</title>
    <style>
        @keyframes myAnimation{
            from{
                transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }

        }
        body{
            
        }
        .container>img{
            height:300px;
            width:300px;
            position:absolute;/*绝对定位*/
            transition:3s;
        }
        .container{
            position: relative;/*相对*/
            margin:300px;
            transform-style:preserve-3d;/*变换风格：3d*/
            transition:2s;
            animation-name:myAnimation;
            animation-duration:4s;
            animation-delay:0s;
            animation-timing-function:linear;
            animation-iteration-count:infinite;

        }
            .container:hover>img:first-child{
                left:-400px;
        
            }
            .container:hover>img:nth-child(2){
                top:-400px;
            }
            .container:hover>img:nth-child(3){
                left:400px;
            }
            .container:hover>img:nth-child(4){
                top:400px;
            }
            .container:hover>img:nth-child(5){
                transform:translateZ(-100px);
            }
            .container:hover>img:nth-child(6){
                transform:translateZ(400px);
            }
        .container>img:first-child{
            left:-300px;
            transform-origin:right;
            transform:rotateY(90deg);
        }
        .container>img:nth-child(2){
            top:-300px;
            transform-origin:bottom;
            transform:rotateX(-90deg);
            
        }
        .container>img:nth-child(3){
            left:300px;
            transform-origin:left;
            transform:rotateY(-90deg);
        }
        .container>img:nth-child(4){
            top:300px;
            transform-origin:top;
            transform:rotateX(90deg);
        }
        .container>img:nth-child(6){
            transform:translateZ(300px);
        }
        
    </style>
</head>

<body>
    <div class="container">

        <img src="https://pic3.zhimg.com/v2-51d6270303e685ebb5b8fac2d7bdd43e_r.jpg" alt="6" />
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.3bad09c7318ed26cb9f49516ebb36c03?rik=qvxyyZZ7TfDHOg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1206%2f18%2fc3%2f12048831_1340013801131.jpg&ehk=DZlUCdaYnCVQqXyg%2b6TjFX1mMUf1%2bm8bWYgzwyxd8Zs%3d&risl=&pid=ImgRaw&r=0" />
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0" />
        <img src="https://img.zcool.cn/community/01e58a5d34518ca8012187f4518a0e.jpg@3000w_1l_2o_100sh.jpg" />
        <img src="https://pic2.zhimg.com/v2-887c4f76824e7ff3f9f2a6b6f7bc3b78_r.jpg" />
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.83fa906c406fcf24f5ccb9bb99ca2df1?rik=gsO0BemVJseGvg&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f324750c6747a5da941b18d1427d42c81759c7dc8.jpg&ehk=hNrXtrMfh%2b8pQDUiiovli%2bHqFCCoFab7a0zJSjAnYWo%3d&risl=&pid=ImgRaw&r=0" />
    </div>

</body>
</html>

 

posted @ 2024-01-04 23:11  青鸢..i  阅读(26)  评论(0)    收藏  举报