实现效果：

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

实现代码：

  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. BTrace实战

    BTrace在解决现场问题的时候非常有用. 1.概述 1.1下载 https://github.com/btraceio/btrace,最新版本是1.3.9 目前1.3.x系列最低支持JDK1.7,要 ...

  2. Yuchuan_Linux_C 编程之十一 进程间通信

    一.整体大纲 二.进程间通信概念及方法  Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换 ...

  3. django 从零开始 2迁移模型数据到数据库中和admin初识

    和flask 一样 如果模型models 发生改动,则需要进行一个迁移数据库,但是我还没有想讲到那么深入,现在模型是django自带的一些sessiong,damin之类的模型 所以如果你想进去adm ...

  4. python opencv Sobel、Laplace、canny算子的边缘提取 以及参数解析

    前提:各种算子不完全区分好坏,但根据我实际操作分析得到,有的算子之间效果大相径庭,但有的也很相似,也就是各有各的用法,这里按 Sobel.Laplace.canny三种算子作比较,看其结果: 一.  ...

  5. 数据结构 5 哈希表/HashMap 、自动扩容、多线程会出现的问题

    上一节,我们已经介绍了最重要的B树以及B+树,使用的情况以及区别的内容.当然,本节课,我们将学习重要的一个数据结构.哈希表 哈希表 哈希也常被称作是散列表,为什么要这么称呼呢,散列.散列.其元素分布较 ...

  6. POJ 1065 & ZOJ 1025

    #include <cstdio> #include <iostream> #include <algorithm> #include <cstring> ...

  7. Web Scraper 高级用法——利用正则表达式筛选文本信息 | 简易数据分析 17

    这是简易数据分析系列的第 17 篇文章. 学习了这么多课,我想大家已经发现了,web scraper 主要是用来爬取文本信息的. 在爬取的过程中,我们经常会遇到一个问题:网页上的数据比较脏,我们只需要 ...

  8. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  9. ElasticSearch之映射常用操作

    本文案例操作,建议先阅读我之前的文章<ElasticSearch之安装及基本操作API> Mapping (映射)类似关系型数据库中的表的结构定义.我们将数据以 JSON 格式存入到 El ...

  10. ES6编译问题SyntaxError: Unexpected token import

    遇到SyntaxError: Unexpected token import 如何解决 ??? 究其原因是node es6问题这还不够,因为我们没有去配置babel,所以我们需要在.babelrc去做 ...