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
投稿猜你喜欢
- 现在是好时机来指出Django和URL配置背后的哲学： 松耦合 原则。 简单的说，松耦合是一个 重要的保证互换性的软件开发方法。Django
- 本文实例讲述了Python实现求数列和的方法。分享给大家供大家参考，具体如下：问题：输入输入数据有多组，每组占一行，由两个整数n（n<
- 本文实例讲述了Python学习笔记之列表推导式。分享给大家供大家参考，具体如下：列表推导式列表推导式可以快速简练地创建列表之前的复杂写法：c
- 签名import base64import jsonimport timefrom datetime import datetimeimpo
- 如图:其中Num是自增长列,Operation是分类标签,count是汇总数据 代码如下:select Num=row_numb
- 代码中经常会有变量是否为None的判断，有三种主要的写法：第一种是`if x is None`；第二种是 `if not x：`；第三种是`
- 如何实现让每句话的头一个字母都大写？ <％dim txtFnametxtFName = &qu
- 库操作查询1.SHOW DATABASE; ----查询所有数据库2.SHOW CREATE DATABASE 数据库名称; ----查询某
- 在SQL Server中进行开发会让你身处险地，并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表
- 折腾了一天的时间，才弄出点眉目来。 做AJAX应用或Flash应用，提交中文内容到后台，涉及到编码解码(encode、decode)及编码格
- 环境: windows 7 + Python 3.5.2 + Selenium 3.4.2 + Chrome Driver 2.29 + C
- 1、从官网下载64位zip文件。2、把zip解压到一个位置，此位置为安装为安装位置3、如果有以前的mysql 如果是instal
方法一：直接右键，将文章路径复制下来点击Copy full Xpath使用selenium+lxml中的etree进行配合使用，使用etre- 一、正则与LIKE的区别 Mysql的正则表达式仅仅使SQL语言的一个子集，可以匹配基本的字符、字符串。例如：select * f
- 紧接上篇文章，本篇文章讲vuex ，如何去改变state ,actions的使用，我依然使用了vuex的modules1.设置actions
- 本文实例讲述了Python实现的人工神经网络算法。分享给大家供大家参考，具体如下：注意：本程序使用Python3编写，额外需要安装numpy
- Oracle的逻辑运算符也是用在SQL语句中必不可少的因素，一共有三个逻辑运算符意义and双值运算符，如果左右两个条件都为真，则得到的值就为
- 导语哈喽！大家好，我是木木子。今日游戏更新系列来啦，是不是很想知道今天的游戏是什么类型的？立马安排上——随着年纪的不断上升，我们开始丢三落四
- 代码如下:--销售冠军 --问题：在公司中，老板走进来，要一张每个地区销量前3名的销售额与销售员的报表 --- create t
- jQuery.parent(expr) &nb
