JS实现六边形3D拖拽翻转效果的方法


Posted in Javascript onSeptember 11, 2016

效果图

JS实现六边形3D拖拽翻转效果的方法

JS实现六边形3D拖拽翻转效果的方法

实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript六边形3d拖拽翻转效果</title>
</head>
    <style>
      #box{width:200px;height:200px;margin: 200px auto; background: #ccc; position: relative;
      transform:perspective(800px) rotateY(-60deg) rotateX(45deg);transform-style:preserve-3d;}
      #box div{width:100%;height: 100%; position: absolute;top:0;left:0; background-size: cover;-webkit-box-shadow:0 0 100px #5fbcff; opacity: 0.8;}
      .front{ transform: translateZ(100px); background:#f00;}
      .back{transform: translateZ(-100px); background:#20ab4f;}
      .top{transform:translateY(-100px) rotateX(90deg); background: #ff7800;}
      .bottom{transform:translateY(100px) rotateX(-90deg); background: #00f6ff;}
      .left{transform:translateX(-100px) rotateY(90deg); background: #0084ff;}
      .right{transform:translateX(100px) rotateY(-90deg); background: #b400ff;}
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.querySelector("#box");
        var y=-60;
        var x=45;
        oDiv.onmousedown=function(ev){
          var ev=ev||event;
          var disX=ev.clientX-y;
          var disY=ev.clientY-x;
          document.onmousemove=function(ev){
            var ev=ev||event;
            y=ev.clientY-disY;
            x=ev.clientX-disX;
            oDiv.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';
            
          }
          document.onmouseup=function(){
            document.onmouseup=null;
            document.onmousemove=null;
            oDiv.releaseCapture&&oDiv.releaseCapture();
          }
          oDiv.setCapture&&oDiv.setCapture()
          return false;
        }
        
      }
    </script>
  </head>
  <body>
    <div id="box">
      <div class="front"></div>
      <div class="back"></div>
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

以上就是这篇文章的全部内容,怎么样?效果很好吧,感兴趣的朋友们自己运行看看效果,希望这篇文章对大家能有一定的帮助。

Javascript 相关文章推荐
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 #Javascript
Three.js快速入门教程
Sep 09 #Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 #Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 #Javascript
You might like
关于PHP的curl开启问题探讨
2014/04/08 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
Python模拟登录12306的方法
2014/12/30 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
公积金转移接收函
2014/01/11 职场文书
给老师的检讨书
2014/02/11 职场文书
客户接待方案
2014/02/26 职场文书
党课培训主持词
2014/04/01 职场文书
文体活动总结范文
2014/05/05 职场文书
中国梦团日活动总结
2014/07/07 职场文书
公司股东出资证明书
2014/11/01 职场文书
增值税发票丢失证明
2015/06/19 职场文书