脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → s实现六边形3D拖拽翻转效果

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

 更新时间：2016年09月11日 10:11:37   投稿：daisy  
这篇文章给大家分享一个利用javascript实现3D六边形拖拽翻转的效果实例，实现后的效果很赞，对大家的学习Javascript具有一定的参考借鉴价值，有需要的朋友们一起去来看看吧。

效果图

实例代码如下：

<!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>

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

您可能感兴趣的文章:

相关文章

  • 微信小程序 JS动态修改样式的实现方法

    微信小程序 JS动态修改样式的实现方法

    这篇文章主要给大家介绍了关于微信小程序JS动态修改样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • ionic js 复选框 与普通的 HTML 复选框到底有没区别

    ionic js 复选框 与普通的 HTML 复选框到底有没区别

    本文通过实例给大家演示ionic js 复选框 与普通的 HTML 复选框到底有没区别的相关知识，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • uniapp打包成微信小程序的详细过程

    uniapp打包成微信小程序的详细过程

    微信小程序的出现给我们提供了一种使用应用的新方式和体验,下面这篇文章主要给大家介绍了关于uniapp打包成微信小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • js实现无缝滚动双图切换效果

    js实现无缝滚动双图切换效果

    这篇文章主要为大家详细介绍了js实现无缝滚动双图切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript作用域示例详解

    JavaScript作用域示例详解

    作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域示例详解的介绍，非常不错，感兴趣的朋友一起看下吧
    2016-07-07
  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历/日期选择插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序日历和日期选择插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 微信小程序中获取设备信息的方法

    微信小程序中获取设备信息的方法

    这篇文章主要给大家介绍了关于微信小程序中获取设备信息的相关资料,微信小程序是一种在微信平台上运行的应用程序,它具有轻量化、便捷性和高兼容性的特点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • JavaScript实现构造json数组的方法分析

    JavaScript实现构造json数组的方法分析

    这篇文章主要介绍了JavaScript实现构造json数组的方法,结合实例形式对比分析了javascript构造json数组的实现方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • Javascript改变CSS样式(局部和全局)

    Javascript改变CSS样式(局部和全局)

    改变CSS样式分为局部和全局，下面为大家介绍下使用Javascript具体的实现，感兴趣的朋友可以参考下
    2013-12-12

最新评论