javascript实现炫酷魔方

实现效果：

魔方动态转换，同时每个面里的每个块都能进行动态变换。

实现代码：

<!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写Android和iOS naitve应用，实在炫酷。
关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...
html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
一款炫酷的幻灯片播放框架介绍（附demo及使用方法）
废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...
7款经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
Css3炫酷总结使用
先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...
Android开发必知--WebView加载html5实现炫酷引导页面
大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5 ...
基于Bootstrap的炫酷jQuery slider插件
简要教程这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

随机推荐

React Native Debug原理浅析
第一次在segmentfault写博客,很紧张~~~公司项目上ReactNative,之前也是没有接触过,所以也是一边学习一边做项目了,最近腾出手来更新总结了一下RN的Debug的一个小知识点,不是说 ...
python正则表达式之re模块方法介绍
python正则表达式之re模块其他方法 1:search(pattern,string,flags=0) 在一个字符串中查找匹配 2:findall(pattern,string,flags=0) ...
PTP从时钟授时模块应用及介绍
PTP从时钟授时模块应用及介绍随着网络技术的不断进步和发展,NTP网络时间协议已经满不了一些精密设备和仪器的精度要求,这时就需要精度更高的PTP协议,PTP协议是一种应用于分布式测量和控制系统中的精 ...
Drf（DjangoRestFramewok）
第一部分问题 1.前后端分离? vue.js 后端给前段返回json数据 2.移动端盛行. app 后端给app返回json数据 3.PC端应用? crm项目,前段后端一起写,运行在浏览器上. 一般 ...
vue中v-slot使用
vue中v-slot使用 1,v-slot的使用步骤   <sl ...
ATOMac - 基于Python的Mac应用Ui自动化库
ATOMacTest 一.缘起近期工作需要对一款Mac端应用实现常用功能的自动化操作,同事推荐ATOMac这款工具,这几天简单研究了下,同时也发现现网介绍ATOMac的资料非常有限,故在此记录下A ...
Python下载各种功能包出问题
问题详情点击之后出现 AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 c ...
kerberos系列之zookeeper的认证配置
本篇博客介绍配置zookeeper的kerberos配置一.zookeeper安装 1.解压安装包和重命名和创建数据目录 tar -zxvf /data/apache-zookeeper-3.5.5 ...
Blazor-断开连接后重新加载浏览器
在大多数情况下,Blazor将与以前相同的线路上重新连接到服务器.但有时无法重新连接,需要重新加载web浏览器才能使网站重新工作.如果服务器回收应用程序池,则需要手动重新加载页面在没有调试的情况下在I ...
Spring Boot入门系列（九）如何实现异步执行任务
前面介绍了Spring Boot 如何整合定时任务,不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/1657780.htm ...

javascript实现炫酷魔方

javascript实现炫酷魔方的更多相关文章

随机推荐

热门专题