-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrotatingexample.html
79 lines (79 loc) · 2.82 KB
/
rotatingexample.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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>CSS rotate</title>
<style type="text/css">
#myDiv {
background-color: lightblue;
display: block;
margin: 0 auto;
border: 2px solid black;
width: 300px;
height: 300px;
text-align: center;
position: relative;
bottom: 295px;
right: 8px;
transition: transform 1.5s;
z-index: -1;
}
p {
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1>Rotate Property</h1>
<h2>Press enter once you finished entering in a value!</h2><br>
<img style="display:block;margin:0 auto;" src="https://i.stack.imgur.com/f48Tj.png" width=300 height=300 />
<div id="myDiv">Rotate this!</div>
<br>
Rotate X: <input id="X" type="textbox" value="0"></input> deg
<br>
Rotate Y: <input id="Y" type="textbox" value="0"></input> deg
<br>
Rotate Z: <input id="Z" type="textbox" value="0"></input> deg
<br><br><br><br>
<p>transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);</p>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function() {
function update() {
$("div").css("transform", "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)");
$("p").html("transform: rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg);");
}
$("#X").change(function() {
if ($("#X").val() * 0 != 0) {
alert("Please enter a number for rotateX");
}
else {
x = $("#X").val();
update();
}
})
$("#Y").change(function() {
if ($("#Y").val() * 0 != 0) {
alert("Please enter a number for rotateY");
}
else {
y = $("#Y").val();
update();
}
})
$("#Z").change(function() {
if ($("#Z").val() * 0 != 0) {
alert("Please enter a number for rotateZ");
}
else {
z = $("#Z").val();
update();
}
})
})
</script>
</body>
</html>