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:442940browse

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

How to achieve Rubik's Cube effect in javascript

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.

How to achieve Rubiks Cube effect in javascript

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