实现效果：

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

实现代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>魔方</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             width: 100%;
  13.             height: 100%;
  14.             background: radial-gradient(#fff,pink);
  15.         }
  16.  
  17.         .container{
  18.             width: 300px;
  19.             height: 300px;
  20.     /*        border:1px solid #000;*/
  21.             margin:150px auto;
  22.             perspective: 20000px;
  23.         }
  24.         .box{
  25.             width: 300px;
  26.             height: 300px;
  27.             border:1px solid transparent;
  28.             box-sizing: border-box;
  29.             position:relative;
  30.             transform-style: preserve-3d;
  31.             /*transform: rotateX(45deg) rotateY(45deg);*/
  32.             animation: rotate 10s linear infinite;
  33.         }
  34.         /*@keyframes ro{
  35.             0%{
  36.                 transform:rotateX(0deg) rotateY(0deg);
  37.             }
  38.             100%{
  39.                 transform: rotateX(360deg) rotateY(360deg);                
  40.  
  41.             }
  42.         }*/
  43.         @keyframes rotate{
  44.             100%{
  45.                 transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
  46.             }
  47.         }
  48.         .box-page{
  49.  
  50.             width: 300px;
  51.             height: 300px;
  52.             position: absolute;
  53.             box-sizing: border-box;
  54.             transform-style: preserve-3d;
  55.         }
  56.         .top{
  57.             /*background-color: red;*/
  58.             transform: translateZ(150px);
  59.         }
  60.         .bottom{
  61.             /*background-color: pink;*/
  62.             transform: translateZ(-150px) rotateX(180deg);
  63.         }
  64.         .left{
  65.             /*background-color: orange;*/
  66.             transform: translateX(-150px) rotateY(-90deg);
  67.         }
  68.         .right{
  69.             /*background-color: green;*/
  70.             transform: translateX(150px) rotateY(90deg);
  71.         }
  72.         .before{
  73.             /*background-color: purple;*/
  74.             transform: translateY(150px) rotateX(-90deg);
  75.         }
  76.         .after{
  77.             /*background-color: blue;*/
  78.             transform: translateY(-150px) rotateX(90deg);
  79.         }
  80.  
  81. /*        .box-page div:nth-child(1){
  82.             animation: a1 4.5s ease-in 0.5s;
  83.         }
  84.         .box-page div:nth-child(2){
  85.             animation: a1 4.5s ease-in 1s;
  86.         }
  87.         .box-page div:nth-child(3){
  88.             animation: a1 4.5s ease-in 1.5s;
  89.         }
  90.         .box-page div:nth-child(4){
  91.             animation: a1 4.5s ease-in 2s;
  92.         }
  93.         .box-page div:nth-child(5){
  94.             animation: a1 4.5s ease-in 2.5s;
  95.         }
  96.         .box-page div:nth-child(6){
  97.             animation: a1 4.5s ease-in 3s;
  98.         }
  99.         .box-page div:nth-child(7){
  100.             animation: a1 4.5s ease-in 3.5s;
  101.         }
  102.         .box-page div:nth-child(8){
  103.             animation: a1 4.5s ease-in 4s;
  104.         }
  105.         .box-page div:nth-child(9){
  106.             animation: a1 4.5s ease-in 4.5s;
  107.         }
  108.  
  109.         @keyframes a1{
  110.             0%{
  111.                 transform: translateZ(0px) scale(0) rotateZ(0deg);
  112.             }
  113.             20%{
  114.                 transform: translateZ(300px) scale(0) rotateZ(720deg);
  115.             }
  116.             90%{
  117.                 transform: translateZ(300px) scale(0) rotateZ(720deg);
  118.             }
  119.  
  120.             100%{
  121.  
  122.                 transform: translateZ(0px) scale(0) rotateZ(0deg);
  123.             }
  124.         }*/
  125.  
  126.         .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){
  127.             transform: rotateY(0deg);
  128.             animation: rotatey 6s linear infinite;
  129.         }
  130.  
  131.         @keyframes rotatey{
  132.             20%{
  133.                 transform: rotateY(0deg);
  134.                 background-size: 300px 300px;
  135.             }
  136.             40%{
  137.                 transform: rotateY(540deg);
  138.                 background-size: 100px 100px;
  139.             }
  140.             60%{
  141.                 transform: rotateY(540deg);
  142.                 background-size: 100px 100px;
  143.             }
  144.             80%{
  145.                 transform: rotateY(0deg);
  146.                 background-size:300px 300px;
  147.             }
  148.         }
  149.  
  150.             .box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8)
  151.             {
  152.             transform: rotateX(0deg);
  153.             animation: rotatex 6s linear infinite;
  154.            }
  155.  
  156.         @keyframes rotatex{
  157.             20%{
  158.                 transform: rotateX(0deg);
  159.                 background-size: 300px 300px;
  160.             }
  161.             40%{
  162.                 transform: rotateX(540deg);
  163.                 background-size: 100px 100px;
  164.             }
  165.             60%{
  166.                 transform: rotateX(540deg);
  167.                 background-size: 100px 100px;
  168.             }
  169.             80%{
  170.                 transform: rotateX(0deg);
  171.                 background-size: 300px 300px;
  172.             }
  173.         }
  174.     </style>
  175. </head>
  176. <body>
  177.     <div class="container">
  178.         <div class="box">
  179.             <div class="top box-page"></div>
  180.             <div class="bottom box-page"></div>
  181.             <div class="left box-page"></div>
  182.             <div class="right box-page"></div>
  183.             <div class="before box-page"></div>
  184.             <div class="after box-page"></div>
  185.         </div>
  186.     </div>
  187.     <script type="text/javascript">
  188.          var arr=document.querySelectorAll(".box>div");
  189.          for(var n = 0; n < arr.length; n++){
  190.              //行遍历
  191.              for(var i=0; i<3; i++){
  192.                  //列遍历
  193.                for(var j=0; j<3; j++){
  194.                     var divs=document.createElement("div");
  195.                     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;"    ;
  196.                     arr[n].appendChild(divs);
  197.  
  198.                     divs.style.left=j*100+"px";
  199.                     divs.style.top=i*100+"px";
  200.  
  201.                     divs.style.backgroundPositionX=-j*100+"px";
  202.                     divs.style.backgroundPositionY=-i*100+"px";
  203.  
  204.                }
  205.             }
  206.          }
  207.  
  208.     </script>
  209. </body>
  210. </html>

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

  1. 用javascript写Android和iOS naitve应用，实在炫酷。

    关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...

  2. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  3. HTML5打造的炫酷本地音乐播放器-喵喵Player

    将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...

  4. 一款炫酷的幻灯片播放框架介绍（附demo及使用方法）

    废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...

  5. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  6. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  7. Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

  8. Android开发必知--WebView加载html5实现炫酷引导页面

    大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5 ...

  9. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

随机推荐

  1. PHPRAP 1.0.2 发布，修复安装失败 Bug 和优化细节

    PHPRAP,是一个PHP轻量级开源API接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造PHP版的RAP. 更新记录 [修复]修复在MySQL5.5版本下安装数据初始化sql文 ...

  2. 读《Java并发编程的艺术》学习笔记（一）

    接下来一个系列,是关于<Java并发编程的艺术>这本书的读书笔记以及相关知识点,主要是为了方便日后多次复习和防止忘记.废话不多说,直接步入主题: 第1章  并发编程的挑战 并发编程的目的是 ...

  3. Nacos 数据持久化 mysql8.0

    一.问题描述 直接下载的稳定版本nacos编译后的文件,不支持mysql8及其以上版本,按照官网文档:https://nacos.io/zh-cn/docs/deployment.html 执行完成之 ...

  4. 编译 openwrt 及初始配置

    主机为 ubuntu 14 x64 硬件: 优酷土豆宝 cpuMT7620A,内存128M,flash 32M有2个源,用哪个也可以git clone https://github.com/openw ...

  5. react-native app 屏幕适配方案（按照设计稿像素大小写就行）

    import React, { Component,PropTypes } from 'react'; import { Dimensions,PixelRatio,Platform,StatusBa ...

  6. 【Python】2.11学习笔记 注释,print,input,数据类型,标识符

    前面学了好多内存什么的知识,没什么用(我有眼不识泰山233 吐槽一句,这课简直就是讲给完全的编程小白听得 就从语言开始写吧(其实好多已经看过了,再来一遍 话说我已经忘了\(Markdown\)怎么写了 ...

  7. Day1T3小w的魔术扑克——图论

    为什么不搞\(T2\)??? 因为我太菜了,那题我是真的搞不出来 题目描述 链接:https://ac.nowcoder.com/acm/contest/1100/C 来源:牛客网 小\(w\)喜欢打 ...

  8. （转）C++对象的内存布局

    原文地址:http://blog.csdn.net/haoel/article/details/3081328 C++ 对象的内存布局 陈皓 http://blog.csdn.net/haoel 前言 ...

  9. Go 武林外传 - 初出茅庐

    没有旁白. 我叫小白, 白痴的白. 老头说我太笨了, 提前放我下山, 让我自生自灭. 对了, 忘了说了, 那老头是我师傅. 虽然我的内心深处是拒绝的, 但是我又打不过老头, 只好收拾铺盖滚犊子了. 算 ...

  10. 14. java基于excel模板导出excel=>使用jxls最新版（注意点）

    注意点:如下: jxls官网:http://jxls.sourceforge.net/getting_started.html