js实现魔方

阅读：评论：0

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&#ateElement("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";p=j*100+"px";divs.style.backgroundPositionX=-o*100+"px";divs.style.backgroundPositionY=-j*100+"px";}}}                                                                         </script></html>

本文发布于:2024-01-31 18:28:06，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170669688530492.html

上一篇：WebUploader实现分块上传（断点续传）着重后端Java代码的实现

下一篇：香港恒生大学

标签：魔方 js

留言与评论（共有 0 条评论）