Home > Article > Web Front-end > How to achieve Rubik's Cube effect in javascript
How to achieve Rubik's Cube effect in javascript
- 藏色散人Original
- 2021-11-18 15:56:442917browse
Javascript method to achieve Rubik's Cube effect: 1. Create an HTML file; 2. Create the required div block; 3. Use css and js code "for(var n = 0; n
The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.
How to achieve the Rubik's Cube effect in javascript?
Achievement effect:
The Rubik's Cube is dynamically converted, and each block in each face can be dynamically transformed.
Implementation code:
<!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>Recommended study: "javascript basic tutorial"
The above is the detailed content of How to achieve Rubik's Cube effect in javascript. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement copy and paste function in javaScriptNext article：How to implement copy and paste function in javaScript