js实现魔方

2024-03-18 23:08

文章标签 实现 js 魔方

本文主要是介绍js实现魔方，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!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>