JavaScript를 사용하여 루빅스 큐브 효과를 얻는 방법: 1. HTML 파일 만들기 2. 필요한 div 블록 만들기 3. CSS 및 js 코드 "for(var n = 0; n
이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.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 basic tutorial"
위 내용은 자바스크립트에서 루빅스 큐브 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!