js实现可旋转的立方体模型


Posted in Javascript onOctober 16, 2016

这是一个简单的立方体应用,他是很多立方旋转变换的基础,例如实现3D轮播图的实现等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可旋转立方体效果</title>
  <style type="text/css">
    *{padding: 0; margin: 0}
    img{border: 0}
    ul li{list-style: none}
    ul{width: 200px; height: 200px; margin: 100px auto;
    position: relative; -webkit-transform-style: preserve-3d ;
      /* perspective: 100px;*/
    }
    /*绕中心旋转,坐标轴会随旋转而旋转*/
    li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
    /*构造六个面*/
    li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)  translateZ(100px);}
    li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}
    li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
    li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
    li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
    li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
    .button{
      width: 200px; margin: 20px auto;
      position: relative;
      cursor: pointer;
    }
    input{
      width: 50px; height: 30px;
      position: absolute;
      cursor: pointer;
    }
    /*按钮的绝对定位*/
    input:nth-child(1){left: 100px; top: 0}
    input:nth-child(2){left:200px;top:50px;}
    input:nth-child(3){left:0px;top:50px;}
    input:nth-child(4){left:100px;top:100px;}
    input:nth-child(5){left:100px;top:50px;}
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var x = 0, y = 0;
      var ul = document.getElementById('ul');
      var inputs = document.getElementsByTagName('input');
      for (var i = 0; i<inputs.length; i++){
        inputs[i].onclick = run;
      }
      function run() {
        /*渐变*/
        ul.style.webkitTransition = '-webkit-transform 3s linear';
        ul.style.oTransition = '-o-transform 3s linear';
        ul.style.transition = 'transform 3s linear';
        /*旋转的规则,就是x,y方向的deg改变*/
        if(inputs[0]==this){x+=90;}
        if(inputs[1]==this){y+=90;}
        if(inputs[2]==this){y-=90;}
        if(inputs[3]==this){x-=90;}
        if (inputs[4] == this){
          x = 0; y = 0;
          ul.style.webkitTransition = '-webkit-transform .1s linear';
          ul.style.oTransition = '-o-transform .1s linear';
          ul.style.transition = 'transform .1s linear';
        }
        ul.style.webkitTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
        ul.style.oTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
        ul.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
      }
      document.addEventListener('keydown', function(e){
        ul.style.webkitTransition='-webkit-transform 3s linear';
        switch(e.keyCode){
          case 37:  y -= 90;  //左箭头
            break;
          case 38:  x += 90;  //上箭头
            break;
          case 39:  y += 90;  //下箭头
            break;
          case 40:  x -= 90;  //右箭头
            break;
          case 13:  x=0; y=0;  //回车 (当回车时,迅速转回初始状态)
            ul.style.webkitTransition='-webkit-transform 0.1s linear';
            break;
        }
        ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果(沿X轴和Y轴旋转)
      }, false);document.addEventListener("keydown", function (e) {
        ul.style.webkitTransition = '-webkit-transform 3s linear';
        ul.style.oTransition = '-o-transform 3s linear';
        ul.style.transition = 'transform 3s linear';
        switch(e.keyCode){
          case 37:
        }
      })
      /* function run(){
        ul.style.webkitTransition='-webkit-transform 3s linear'; //设置立方体变换的属性、持续时间、动画类型
        if(inputs[0]==this){x+=90;}
        if(inputs[1]==this){y+=90;}
        if(inputs[2]==this){y-=90;}
        if(inputs[3]==this){x-=90;}
        if(inputs[4]==this){x=0;y=0; ul.style.webkitTransition='-webkit-transform 0.1s linear';}  //当点击重置按钮时,迅速转回到初始状态。
        ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)";  //变换效果(沿X轴和Y轴旋转)
      }*/
    }
  </script>
</head>
<body>
<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<div class="container">
</div>
<div class="button">
  <input type="button" value="上">
  <input type="button" value="右">
  <input type="button" value="左">
  <input type="button" value="下">
  <input type="button" value="重置">
</div>

</body>
</html>
Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
JS中的模糊查询功能
Dec 08 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
移动端滑动插件Swipe教程
Oct 16 #Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 #Javascript
js实现点击图片自动提交action的简单方法
Oct 16 #Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php生成二维码
2015/08/10 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
javascript关于继承解析
2016/05/10 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
解析Python中while true的使用
2015/10/13 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
代理商会议邀请函
2014/01/27 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2014年变电站工作总结
2014/12/19 职场文书
反邪教教育心得体会
2016/01/15 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python