How to achieve Rubik's Cube effect in javascript-JS Tutorial-php.cn

How to achieve Rubik's Cube effect in javascript

藏色散人

Release： 2022-01-22 09:10:03

Original

3017 people have browsed it

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>

Copy after login

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!