-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdefault.htm
96 lines (96 loc) · 3.69 KB
/
default.htm
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
<!DOCTYPE html>
<html>
<head>
<title>3d Transforms Testing Area</title>
<link rel="stylesheet" type="text/css" href="content/style.min.css">
<style id="panelStyle"></style>
</head>
<body>
<div id="container">
<div id="panel"><center>Lorem Ipsum</center></div>
</div>
<div id="inputs">
<h1>Transform</h1>
<i>(use up down arrow keys for better performance)</i>
<div class="row">
<label for="rotateY">rotateY</label>
<input value="0" name="rotateY" id="rotateY" type="number">
<button class="clearBtn" data-idval="rotateY">Clear</button>
<span>deg</span>
<div class="clear">
</div>
</div>
<div class="row">
<label for="rotateX">rotateX</label>
<input value="0" name="rotateX" id="rotateX" type="number">
<button class="clearBtn" data-idval="rotateX">Clear</button>
<span>deg</span>
<div class="clear"></div>
</div>
<div class="row">
<label for="rotateZ">rotateZ</label>
<input value="0" name="rotateZ" id="rotateZ" type="number">
<button class="clearBtn" data-idval="rotateZ">Clear</button>
<span>deg</span>
<div class="clear"></div>
</div>
<div class="row">
<label for="translateY">translateY</label>
<input value="0" name="translateY" id="translateY" type="number">
<button class="clearBtn" data-idval="translateY">Clear</button>
<span>px</span>
<div class="clear"></div>
</div>
<div class="row">
<label for="translateX">translateX</label>
<input value="0" name="translateX" id="translateX" type="number">
<button class="clearBtn" data-idval="translateX">Clear</button>
<span>px</span>
<div class="clear"></div>
</div>
<div class="row">
<label for="translateZ">translateZ</label>
<input value="0" name="translateZ" id="translateZ" type="number">
<button class="clearBtn" data-idval="translateZ">Clear</button>
<span>px</span>
<div class="clear"></div>
</div>
<hr>
<div class="row">
<label for="perspective">Perspective</label>
<input value="0" name="perspective" id="perspective" type="number">
<span>px</span>
<button class="clearBtn" data-idval="perspective">Clear</button>
<div class="clear">
</div>
</div>
<hr>
<div class="row">
<label for="multiplier">multiplier</label>
<input value="1" name="multiplier" id="multiplier" type="number">
<span>x</span>
<button class="clearBtn" data-idval="multiplier">Clear</button>
<div class="clear">
</div>
</div>
<hr>
<div id="tstyle" class="row">
<p class="long">transform style</p>
<b id="tstyleinput" class="word">preserve-3d</b>
<div class="clear"></div>
</div>
<div id="bvis" class="row">
<p class="long">backface-visibility</p>
<b id="bvisinput" class="word">visible</b>
<div class="clear"></div>
</div>
<button id="clearAll">Clear All</button>
<hr>
<center>Output:</center>
<textarea id="output" rows="8" cols="32"></textarea>
<button id="outputBtn">Select All Output</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/functions.min.js"></script>
</body>
</html>