WWW.lllT.neT

javascript完成三阶魔方实际效果的方式:1、建立一个HTML文档;2、建立必须的div块;3、根据css和js代码“for(var n = 0; n < arr.length; n ){...}”完成三阶魔方实际效果就可以。

文中实际操作自然环境:windows7系统软件、javascript1.8.5版、Dell G3电脑上。

javascript如何完成三阶魔方实际效果?

完成实际效果:

三阶魔方动态性变换,与此同时每一个面里的每一个块都能开展动态性转换。

6fbac0ecde60790fd59867235e2317b.png

完成编码:

<!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  ){
             //行解析xml
             for(var i=0; i<3; i  ){
                 //列解析xml
               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基础教程》

以上便是javascript如何完成三阶魔方实际效果的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:javascript如何完成三阶魔方实际效果发布于2021-12-13 15:36:01