这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章给大家分享一个利用 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>
以上就是这篇文章的全部内容,怎么样?效果很好吧,感兴趣的朋友们自己运行看看效果,希望这篇文章对大家能有一定的帮助。
来源: http://www.phperz.com/article/17/0708/331947.html