javascript实现魔方效果的方法:1、创建一个HTML文件;2、创建需要的div块;3、通过css和js代码“for(var n = 0; n < arr.length; n++){...}”实现魔方效果即可。
本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
javascript怎么实现魔方效果?
实现效果:
魔方动态转换,同时每个面里的每个块都能进行动态变换。
实现代码:
<!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基础教程》