这篇文章主要介绍了javascript如何实现魔方效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
javascript实现魔方效果的方法:1、创建一个HTML文件;2、创建需要的div块;3、通过css和js代码“for(var n = 0; n < arr.length; n++){...}”实现魔方效果即可。
本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
实现效果:
魔方动态转换,同时每个面里的每个块都能进行动态变换。
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>魔方</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background: radial-gradient(#fff,pink); } .container{ width: 300px; height: 300px; /* border:1px solid #000;*/ margin:150px auto; perspective: 20000px; } .box{ width: 300px; height: 300px; border:1px solid transparent; box-sizing: border-box; position:relative; transform-style: preserve-3d; /*transform: rotateX(45deg) rotateY(45deg);*/ animation: rotate 10s linear infinite; } /*@keyframes ro{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform: rotateX(360deg) rotateY(360deg); } }*/ @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{ /*background-color: red;*/ transform: translateZ(150px); } .bottom{ /*background-color: pink;*/ transform: translateZ(-150px) rotateX(180deg); } .left{ /*background-color: orange;*/ transform: translateX(-150px) rotateY(-90deg); } .right{ /*background-color: green;*/ transform: translateX(150px) rotateY(90deg); } .before{ /*background-color: purple;*/ transform: translateY(150px) rotateX(-90deg); } .after{ /*background-color: blue;*/ transform: translateY(-150px) rotateX(90deg); } /* .box-page div:nth-child(1){ animation: a1 4.5s ease-in 0.5s; } .box-page div:nth-child(2){ animation: a1 4.5s ease-in 1s; } .box-page div:nth-child(3){ animation: a1 4.5s ease-in 1.5s; } .box-page div:nth-child(4){ animation: a1 4.5s ease-in 2s; } .box-page div:nth-child(5){ animation: a1 4.5s ease-in 2.5s; } .box-page div:nth-child(6){ animation: a1 4.5s ease-in 3s; } .box-page div:nth-child(7){ animation: a1 4.5s ease-in 3.5s; } .box-page div:nth-child(8){ animation: a1 4.5s ease-in 4s; } .box-page div:nth-child(9){ animation: a1 4.5s ease-in 4.5s; } @keyframes a1{ 0%{ transform: translateZ(0px) scale(0) rotateZ(0deg); } 20%{ transform: translateZ(300px) scale(0) rotateZ(720deg); } 90%{ transform: translateZ(300px) scale(0) rotateZ(720deg); } 100%{ transform: translateZ(0px) scale(0) rotateZ(0deg); } }*/ .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%{ transform: rotateY(540deg); background-size: 100px 100px; } 60%{ 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%{ transform: rotateX(540deg); background-size: 100px 100px; } 60%{ 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> <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:2px solid #fff; box-sizing:border-box;position:absolute; background-image:url(imgs/a"+n+".jpg); background-size:300px 300px;" ; arr[n].appendChild(divs); divs.style.left=j*100+"px"; divs.style.top=i*100+"px"; divs.style.backgroundPositionX=-j*100+"px"; divs.style.backgroundPositionY=-i*100+"px"; } } } </script> </body> </html>
感谢你能够认真阅读完这篇文章,希望小编分享的“javascript如何实现魔方效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。