Shulou(Shulou.com)06/02 Report--

This article mainly introduces javascript how to achieve the Rubik's cube effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The method of javascript to achieve Rubik's cube effect: 1. Create a HTML file; 2. Create the required div block; 3. Through css and js code "for (var n = 0; n; n)"

< arr.length; n++){...}"实现魔方效果即可。 本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。 实现效果： 魔方动态转换，同时每个面里的每个块都能进行动态变换。 实现代码： 魔方 *{ 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 traversal +) {/ / Line traversal for (var iTuno; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.