js实现魔方

最新推荐文章于 2025-03-07 10:32:52 发布

LT_ya

最新推荐文章于 2025-03-07 10:32:52 发布

阅读量598

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/tao__f/article/details/108522807

版权

前端专栏收录该内容

39 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔方</title>
   
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #contener{
            width: 1000px;
            height: 1000px;
            margin: 10px auto;
            
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateY(45deg);
            position: relative;
            animation: ro 10s linear infinite;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 2px soild #000;
            background-color: aqua;
            opacity: 100%;
           position:absolute;
           top: 20%;
           left: 35%;
        }
        #top{
            transform-style: preserve-3d;
            background-color: slateblue;
            transform: translateZ(-150px);
        }
        #front{
            transform-style: preserve-3d;
            background-color: chartreuse;
            transform: rotateX(90deg) translateZ(150px)
            
        }
        #after{
            transform-style: preserve-3d;
            background-color: chartreuse;
            transform: rotateX(90deg) translateZ(-150px);
        }
        
        #left{
            transform-style: preserve-3d;
            background-color: rgb(241, 65, 7);
            transform: rotateY(90deg)  translateZ(-150px) ;
            
        }
        #right{
            transform-style: preserve-3d;
            background-color: rgb(241, 65, 7);
            transform: rotateY(90deg)  translateZ(150px) ;
        }
        #bottom{
            transform-style: preserve-3d;
            background-color: slateblue;
            transform: translateZ(150px);
        }
        @keyframes ro{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
  <div id="contener">
      <div class="box" id="front"></div>
      <div class="box" id="after" ></div>
      <div class="box"  id="top"></div>
      <div class="box" id="left"></div>
      <div class="box" id="bottom"></div>
      <div class="box" id="right"></div>
  </div>  
</body>
<script>
    var arr=document.querySelectorAll(".box");
    for(var i=0;i<arr.length;i++){
        for(var j=0;j<3;j++){
            for(var o=0;o<3;o++){
                var divs=document.createElement("div");
                divs.style.cssText="width:100px; height:100px;border:2px solid #fff;box-sizing:border-box; float:left; background-image:url(img/"+i+".jpg);background-size:300px 300px;"
                arr[i].appendChild(divs);
                divs.style.left=o*100+"px";
                divs.style.top=j*100+"px";
                divs.style.backgroundPositionX=-o*100+"px";
                divs.style.backgroundPositionY=-j*100+"px";


            }
        }

    }                                                                         
   
  </script>
  
</html>