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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
js实现页面图片消除效果
Mar 24 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
npm ci命令的基本使用方法
Sep 20 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
9个经典的PHP代码片段分享
2014/12/18 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
华三通信H3C面试题
2015/05/15 面试题
公司节能减排倡议书
2014/05/14 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python