javascript实现魔方效果的方法：1、创建一个HTML文件；2、创建需要的div块；3、通过css和js代码“for(var n = 0; n < arr.length; n++){…}”实现魔方效果即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript怎么实现魔方效果？
实现效果：
立即学习“Java免费学习笔记（深入）”；
魔方动态转换，同时每个面里的每个块都能进行动态变换。
火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。
106 查看详情
立即学习“Java免费学习笔记（深入）”；
实现代码：
魔方 *{ 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; } }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"; } } }
推荐学习：《javascript基础教程》
立即学习“Java免费学习笔记（深入）”；
以上就是javascript怎么实现魔方效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/557461.html
微信扫一扫 
支付宝扫一扫 
