• 技术文章 >web前端 >js教程

    javascript怎么实现魔方效果

    藏色散人藏色散人2021-11-18 15:56:44原创78

    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++){
                 //行遍历
                 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基础教程

    以上就是javascript怎么实现魔方效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:javaScript怎么实现复制粘贴功能 下一篇:聊聊Node.js中的事件驱动程序和EventEmitter类
    VIP会员

    相关文章推荐

    • javascript中有hashmap么• javascript弹出框乱码怎么办• javascript怎么求数组最大值• javascript 字符串怎么转布尔• javaScript怎么实现复制粘贴功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网