动画之魔方效果

最新推荐文章于 2021-08-03 23:50:06 发布

weixin_44389107

最新推荐文章于 2021-08-03 23:50:06 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/weixin_44389107/article/details/93082995

版权

<!DOCTYPE html>
<html>
<head>
    <title>魔方</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background: radial-gradient(#fff, black);
        }
        .container{
            width:300px;
            height:300px;
            margin:200px auto;
            perspective:20000px;
        }
        .box{
            width:300px;
            height:300px;
            border:1px solid transparent;
            box-sizing: border-box;
            position:relative;
            transform-style:preserve-3d;
            /*transform:rotateX(30deg) rotateY(30deg);*/
            animation: rotate 10s linear infinite;
        }
        @keyframes rotate{
            100%{
                transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
            }
        }

        .box-page{
            width: 300px;
            height: 300px;
            position:absolute;
            box-sizing: border-box;
            transform-style:preserve-3d;
        }


        .top{
            transform: translateZ(150px);
        }
        .bottom{
            transform: translateZ(-150px) rotateX(180deg);
        }
        .right{
            transform: translateX(150px) rotateY(90deg);
        }
        .left{
            transform: translateX(-150px) rotateY(-90deg);
        }
        .after{
            transform: translateY(-150px) rotateX(90deg);
        }
        .before{
            transform: translateY(150px) rotateX(-90deg);
        }


        .box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
            transform: rotateY(0deg);
            animation: rotatey 6s linear infinite;
        }


        @keyframes rotatey{
            20%{
                transform: rotateY(0deg);
                background-size: 300px 300px;
            }
            40%{
                /*background-image: url("img/img.jpg");*/
                transform: rotateY(540deg);
                background-size: 100px 100px;
            }
            60%{
                /*background-image: url("img/img.jpg");*/
                transform: rotateY(540deg);
                background-size: 100px 100px;
            }
            80%{
                transform: rotateY(0deg);
                background-size:300px 300px;
            }
        }

        .box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
            transform:rotateX(0deg);
            animation: rotatex 6s linear infinite;
        }

        @keyframes rotatex{
            20%{
                transform: rotateX(0deg);
                background-size: 300px 300px;
            }
            40%{
                /*background-image: url("img/img.jpg");*/
                transform: rotateX(540deg);
                background-size: 100px 100px;
            }
            60%{
                /*background-image: url("img/img.jpg");*/
                transform: rotateX(540deg);
                background-size: 100px 100px;
            }
            80%{
                transform: rotateX(0deg);
                background-size: 300px 300px;
            }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="top box-page"></div>
        <div class="bottom box-page"></div>
        <div class="left box-page"></div>
        <div class="right box-page"></div>
        <div class="before box-page"></div>
        <div class="after box-page"></div>
    </div>
</div>
<div class="box2" style="margin: 0px auto;width:600px;height:300px;"><iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe></div>

<script type="text/javascript">
    var arr = document.querySelectorAll(".box>div");
    for(var n = 0;n<arr.length;n++){
        for(var i=0;i<3;i++){
            for(var j=0;j<3;j++){
                var divs = document.createElement("div");
                divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";
                arr[n].appendChild(divs);

                // 改变每一个div的位置
                divs.style.left = 100*j+"px";
                divs.style.top = 100*i+"px";

                // 改变背景图相应的位置
                divs.style.backgroundPositionX = -j*100+"px";
                divs.style.backgroundPositionY = -i*100+"px";
            }
        }
    }

</script>
</body>
</html>

weixin_44389107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画之魔方效果

<!DOCTYPE html><html><head> <title>魔方</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padd...
复制链接

扫一扫