<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
cursor: url("./openhand1.png"), auto;
}
.big_box {
width: 500px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
}
.box {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: 200px 200px 0px;
position: relative;
transform: rotatex(-22deg) rotatey(0deg) rotatez(0deg)scale3d(1, 1, 1);
}
.box span {
transition: all 1s linear;
}
span {
display: block;
position: absolute;
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid #999;
font-size: 60px;
border-radius: 12%;
color: red;
}
.box span:nth-child(1) {
/* background: red; */
/* background: url("./openhand1.png"); */
/* background-size: 100% 100%; */
/* transform: rotatey(-90deg) translatex(-50px); */
background: url("./openhand1.png");
background-size: 100% 100%;
transform: translateZ(200px);
}
.box span:nth-child(2) {
/* background-color: green; */
/* transform: rotatey(90deg) translatex(100px); */
background: url("./openhand1.png");
background-size: 100% 100%;
transform: translateZ(-200PX) rotatey(180deg);
}
.box span:nth-child(3) {
background: url("./openhand1.png");
background-size: 100% 100%;
transform: translateX(-200px) rotateY(-90deg);
}
.box span:nth-child(4) {
background: url("./openhand1.png");
background-size: 100% 100%;
transform: translateX(200px) rotateY(90deg);
;
}
.box:hover span {
/* opacity: 0.3; */
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="big_box">
<div class="box">
<span>1</span>
<span>2</span>
<span><i class="content">这是一段文本</i></span>
<span>4</span>
</div>
</div>
<script>
move();
//鼠标按下且移动时触发,
function move() {
var body = document.querySelector("body");
var box = document.querySelector(".box");
var content = document.querySelector(".content");
content.onclick = function () {
console.log(111)
}
var x = 0, y = 0, z = 0;
var xx = 0, yy = 0;
var xArr = [], yArr = [];
window.onmousedown = function (e) {//鼠标按下事件
body.style.cursor = 'url("./closedhand1.png"),auto';
xArr[0] = e.clientX / 2;//获取鼠标点击屏幕时的坐标
yArr[0] = e.clientY / 2;
window.onmousemove = function (e) {//鼠标移动事件------------当鼠标按下且移动时触发
xArr[1] = e.clientX / 2;//获取鼠标移动时第一个点的坐标
yArr[1] = e.clientY / 2;
yy += xArr[1] - xArr[0];//获得鼠标移动的距离
xx += yArr[1] - yArr[0];
// box.style.transform = "rotatex(" + xx + "deg) rotatey(" + yy + "deg) rotatez(0deg)scale3d(1,1,1)";
box.style.transform = "rotatex(-22deg) rotatey(" + yy + "deg) rotatez(0deg)scale3d(1,1,1)";
xArr[0] = e.clientX / 2;
yArr[0] = e.clientY / 2;
}
};
window.onmouseup = function () {//鼠标抬起事件------------用于清除鼠标移动事件,
body.style.cursor = 'url("./openhand1.png"),auto';
window.onmousemove = null;
}
}
</script>
</body>
</html>
3D旋转菜单
dongsdh2024-03-16 8:49
相关推荐
奔跑吧邓邓子20 分钟前
npm包管理深度探索:从基础到进阶全面教程!软件开发技术深度爱好者29 分钟前
用HTML5+CSS+JavaScript庆祝国庆前端李易安40 分钟前
ajax的原理,使用场景以及如何实现汪子熙1 小时前
Angular 服务器端应用 ng-state tag 的作用介绍Envyᥫᩣ1 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》Мартин.5 小时前
[Meachines] [Easy] Sea WonderCMS-XSS-RCE+System Monitor 命令注入昨天;明天。今天。7 小时前
案例-表白墙简单实现数云界7 小时前
如何在 DAX 中计算多个周期的移动平均线风清扬_jd7 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++安冬的码畜日常7 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀:用函数式编程(FP)实现事件只触发一次