JS实现六边形3D拖拽翻转效果的方法
作者：daisy 发布时间：2023-08-28 15:51:31
标签：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>
0
投稿猜你喜欢
- 首先要作出决策，你是否想要使用最新的开发版本或最终的稳定版本。在MySQL开发过程中，同时存在多个发布系列，每个发布处在成熟度的不同阶段：&
- 1，CSS，JS，IMG一个都不能少运行代码框<style type="text/css">&l
- 有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看
- 介绍提到爬虫，互联网的朋友应该都不陌生，现在使用Python爬取网站数据是非常常见的手段，好多朋友都是爬取豆瓣信息为案例，我不想重复，就使用
- 作者:peace.zhao 关于 游标 if,for 的例子 create or replace procedure peace_if is
- 1、DOMWEB标准现在可真是热门中热门，不过下面讨论的是一个不符合标准的document.all[]。DOM－－DOCUMENTOBJEC
- asp连接mysql的问题ASP连接Mysql数据库的问题。下了一个MySql 的ODBC驱动。做了个小测试。顺利通过。先记录下来，中间还有
- 进入sqlplus SQL> set timing on SQL> SQL> select count(*) from c
- 在当前的Web设计中，jQuery被越来越多地应用在Web开发中，之所以jQuery收到如此程度的欢迎，除了其本身具备的优秀易读易操作的代码
- 主键的生成方式主要有三种： 一. 数据库自动生成 二. GUID 三. 开发创建 严格讲这三种产生方式有一定的交叉点，其定位方式将在下面进行
上个月，我写了一篇关于微软如何在向jQuery贡献代码的文章，也谈到了在第一批贡献的代码中的一些功能：jQuery模板和数据链接支持.今天，- 在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色
- 有很多应用项目, 刚起步的时候用MYSQL数据库基本上能实现各种功能需求，随着应用用户的增多，数据量的增加，MYSQL渐渐地出现不堪重负的情
- 轮播图的根本其实就是缓动函数的封装，如果说轮播图是一辆跑动的汽车，那么缓动函数就是它的发动机，今天本文章就带大家由简入繁，封装属于自己的缓动
- 发现这个也是偶然，在测试的时候发现的，因此问题还发现一个bug。蛮有意思~ 假如输入http://www.aspxhome.com的话，在
- PHP simplexml_import_dom() 函数实例获取 DOM 文档节点并转换为 SimpleXML 节点：<?php $
- 二叉树中和为某一值的路径：输入一颗二叉树的跟节点和一个整数，打印出二叉树中结点值的和为输入整数的所有路径。路径定义为从树的根结点开始往下一直
- 大家在打开带有图片的网页时，有时会看到这样的情况：当鼠标指向图片的不同部位时，可以打开不同的超链接，这
- 众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己
- SQL(结构化查询语言)就是负责与ANSI维护的数据库交互的标准。最新的版本是SQL-99，还有一个新标准SQL-200n尚处于制定过程中。
