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

前端之家收集整理的这篇文章主要介绍了JS实现六边形3D拖拽翻转效果的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果

实例代码如下:

javascript六边形3d拖拽翻转<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a> @H_403_23@ 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>
Box">

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

猜你在找的JavaScript相关文章