【代码】3D旋转平移案例

前言

3D旋转平移案例

源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px dashed black;
}
.cur {
width: 400px;
height: 100px;
background: red;
}
p {
margin-top: 10px;
}
</style>
</head>
<body>

<div class="box">
<div class="cur"></div>
<p>RX: <input type="range" min="0" max="360" value="0" name="rx"><span>0</span></p>
<p>RY: <input type="range" min="0" max="360" value="0" name="ry"><span>0</span></p>
<p>RZ: <input type="range" min="0" max="360" value="0" name="rz"><span>0</span></p>
<p>TX: <input type="range" min="0" max="360" value="0" name="tx"><span>0</span></p>
<p>TY: <input type="range" min="0" max="360" value="0" name="ty"><span>0</span></p>
<p>TZ: <input type="range" min="0" max="360" value="0" name="tz"><span>0</span></p>
</div>

<script>
// 获取全部范围条
let ranges = document.querySelectorAll("input");
// 获取全部span元素
let spans = document.querySelectorAll("span");
// 获取节点
let cur = document.querySelector(".cur");
let rx = `rotateX(0deg)`;
let ry = `rotateY(0deg)`;
let rz = `rotateZ(0deg)`;
let tx = `translateX(0px)`;
let ty = `translateY(0px)`;
let tz = `translateZ(0px)`;
// 批量添加事件
for (let i = 0; i < ranges.length; i++) {
// 拥有六个IIFE,每一个IIFE都有属于自己的独立作用域
+function (index) {
ranges[i].oninput = function() {
spans[i].innerHTML = this.value;
// 通过条件语句区分范围条
switch (this.name) {
case "rx":
rx = `rotateX(${this.value}deg)`;
break;
case "ry":
ry = `rotateY(${this.value}deg)`;
break;
case "rz":
rz = `rotateZ(${this.value}deg)`;
break;
case "tx":
tx = `translateX(${this.value}px)`;
break;
case "ty":
ty = `translateY(${this.value}px)`;
break;
case "tz":
tz = `translateZ(${this.value}px)`;
break;
}
// 修改红盒子形态
cur.style.transform = `${rx} ${ry} ${rz} ${tx} ${ty} ${tz}`;
}
}(i)
}

</script>

</body>
</html>

完成

参考文献

哔哩哔哩——web前端小清风