-
Notifications
You must be signed in to change notification settings - Fork 1
/
ex2.html
125 lines (109 loc) · 4.28 KB
/
ex2.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- disable zooming -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=0" />
<title>Examples of Transforms</title>
<link rel="stylesheet" href="includes/style.css" media="screen" />
<style media="screen">
.container {
width: 198px;
height: 198px;
border: 1px solid #CCC;
margin: 0 auto 60px;
position: relative;
overflow: visible;
transform-style: preserve-3d;
}
.panel {
width: 192px;
height: 192px;
position: absolute;
opacity: 0.7;
border: 4px solid black;
font-size: 24px;
font-weight: bold;
color: white;
text-align: center;
background: red;
transform-style: preserve-3d;
}
.image {
background-color: transparent;
background-size: cover;
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Examples of Transforms</h1>
<div id="translate-z-negative" class="container">
</div>
<div id="result1">....</div>
<div><br>Should be:<br>n1 position = [100, -100, -1000]</div>
<div id="translate-z-positive" class="container">
</div>
<div id="result2">....</div>
<div><br>Should be:<br>n2 position = [0, 0, -451]</div>
<div id="rotate-x" class="container">
</div>
<div id="result3">....</div>
<div><br>Should be:<br>n3 matrix = [1, 0, 0, 0,<br>
0, 0.8191520442889918, -0.573576436351046, 0,<br>
0, 0.573576436351046, 0.8191520442889918, 0,<br>
0, 0, 0, 1]<br>
n3 worldMatrix = [1, 0, 0, 0,<br>
0, 0.8191520442889918, -0.573576436351046, 0,<br>
0, 0.573576436351046, 0.8191520442889918, -750,<br>
0, 0, 0, 1]</div>
<div id="rotate-y" class="container">
</div>
<div id="result4">....</div>
<div><br>Should be:<br>n4 matrix = [0.7071067811865476, 0, 0.7071067811865475, -70.7,<br>
0, 1, 0, 0,<br>
-0.7071067811865475, 0, 0.7071067811865476, 0,<br>
0, 0, 0, 1]<br>
n41 matrix = [0.7071067811865475, 0, -0.7071067811865476, 70.72135623730951,<br>
0, 1, 0, 0,<br>
0.7071067811865476, 0, 0.7071067811865475, 1.4210854715202004e-14,<br>
0, 0, 0, 1]<br>
n41 worldMatrix = [0.5754418589960313, -0.030153689607045803, -0.8172866216440066, 110.98959091579192,<br>
-0.12278780396897285, 0.984807753012208, -0.12278780396897282, 40.43776683232346,<br>
0.8085727067565839, 0.17101007166283433, 0.5629970988186381, -798.0622386145972,<br>
0, 0, 0, 1]
</div>
<div id="rotate-z" class="container">
</div>
<div id="result5">....</div>
<div><br>Should be:<br>LEFT:<br>
n5 matrix = [0.8180294248815739, -0.5727903697794315, 0.052335956242943835, 0,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
-0.04287110554622667, 0.030018671274852006, 0.9986295347545738, -1000,<br>
0, 0, 0, 1]<br>
n5 worldMatrix = [0.8090669233189091, -0.5665147586240373, -0.15643446504023087, 207.91169081775934,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
0.12814361183495993, -0.08972712298025791, 0.9876883405951377, -978.1476007338057,<br>
0, 0, 0, 1]<br>
MIDDLE:<br>
n5 matrix = [-0.8180294248815739, 0.5727903697794315, -0.05233595624294356, 0,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
0.04287110554622644, -0.030018671274851846, -0.9986295347545738, -1000,<br>
0, 0, 0, 1]<br>
n5 worldMatrix = [-0.8180294248815739, 0.5727903697794315, -0.0523359562429434, 1.5986063949206228e-13,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
0.04287110554622631, -0.030018671274851756, -0.9986295347545738, -1000,<br>
0, 0, 0, 1]<br>
RIGHT:<br>
n5 matrix = [0.8090669233189091, -0.5665147586240372, -0.15643446504023112, 0,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
0.12814361183496015, -0.08972712298025806, 0.9876883405951377, -1000,<br>
0, 0, 0, 1]<br>
n5 worldMatrix = [0.8185482607599402, -0.5731536625725573, 0.03838780908751943, -194.23435121997173,<br>
0.573576436351046, 0.8191520442889918, 0, 0,<br>
-0.0314454522898171, 0.022018342735743685, 0.9992629164106211, -980.9551553491916,<br>
0, 0, 0, 1]</div>
<script type="module" src="js/ex2.js"></script>
<p class="footer">Ideas for examples taken from tutorial code at the <a href="https://github.com/desandro/3dtransforms">3DTransforms</a> project on github.</p>
</body>
</html>