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 检测浏览器和操作系统的脚本
Dec 26 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
JS功能代码集锦
May 04 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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修改时间格式的代码
2011/05/29 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
教你安装python Django(图文)
2013/11/04 Python
收集的几个Python小技巧分享
2014/11/22 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
python实现类之间的方法互相调用
2018/04/29 Python
python函数与方法的区别总结
2019/06/23 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
抗洪救灾标语
2014/10/08 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android