js和css3实现动态魔方的效果

简介: js和css3实现动态魔方的效果

实现效果


静态效果



动态效果



实现代码


思路


1.构建静态魔方


首先设置css属性transform-style为preserve-3d,让元素位于3d空间中。然后使用css3中的平移和旋转对每个面分别操作来构建出立体魔方,最后使用js来给每个面设置背景图(注意:魔方用到的6张图片都存放在img目录下,并且需要统一命名为a0,a1…a5,方便遍历)。


2.动态魔方


使用css3的animation设置动画。


完整代码

<!DOCTYPE html>
<html>
<head>
  <title>魔方</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      width: 100%;
      height: 100%;
      background: radial-gradient(#fff, red); 
    }
    .container{
      width:300px;
      height:300px;
      margin:200px auto;
      perspective:20000px;
    }
    .box{
      width:300px;
      height:300px;
      border:1px solid transparent;
      box-sizing: border-box;
      position:relative;
      transform-style:preserve-3d;
      /*transform:rotateX(30deg) rotateY(30deg);*/
      animation: rotate 10s linear infinite;
    }
    @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{
      transform: translateZ(150px);
    }
    .bottom{
      transform: translateZ(-150px) rotateX(180deg);
    }
    .right{
      transform: translateX(150px) rotateY(90deg);
    }
    .left{
      transform: translateX(-150px) rotateY(-90deg);
    }
    .after{
      transform: translateY(-150px) rotateX(90deg);
    }
    .before{
      transform: translateY(150px) rotateX(-90deg);
    }
    .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%{
        /*background-image: url("img/img.jpg");*/
        transform: rotateY(540deg);
        background-size: 100px 100px;
      }
      60%{
        /*background-image: url("img/img.jpg");*/
        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%{
        /*background-image: url("img/img.jpg");*/
        transform: rotateX(540deg);
        background-size: 100px 100px;
      }
      60%{
        /*background-image: url("img/img.jpg");*/
        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: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";
        arr[n].appendChild(divs);
        // 改变每一个div的位置
        divs.style.left = 100*j+"px";
        divs.style.top = 100*i+"px";
        // 改变背景图相应的位置
        divs.style.backgroundPositionX = -j*100+"px";
        divs.style.backgroundPositionY = -i*100+"px";   
      }
    }
  }
</script>
</body>
</html>
相关文章
|
2天前
|
JavaScript 前端开发
js制作动态表单
js制作动态表单
6 0
|
7天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
20 0
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——CSS3、基础样式表
H5+CSS3+JS逆向前置——CSS3、基础样式表
26 0
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
21天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
26天前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
16 0
|
26天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
47 0
|
22天前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
28 0

相关产品

  • 云迁移中心