-
Notifications
You must be signed in to change notification settings - Fork 272
/
sonnensystem_x3dom_bewegt.html
114 lines (91 loc) · 3.86 KB
/
sonnensystem_x3dom_bewegt.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X3DOM 1.0 - IX Special</title>
<link rel="icon" type="image/vnd.microsoft.icon" href="media/images/instantreality.ico" />
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/x3dom/src/x3dom.css" />
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/wp-content/themes/x3dom/instantreality.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="http://instantreality.org/media/css/ie-fixes.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/wp-content/themes/x3dom/tables.css" media="screen, projection" />
<!-- X3DOM -->
<script type='text/javascript' src='http://www.x3dom.org/x3dom/release/x3dom.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/x3dom/release/x3dom.css" />
<style type="text/css">
#earth {
-webkit-animation: spinErde 1s infinite linear;
}
@-webkit-keyframes spinErde {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
#moon {
-webkit-animation: spinMoon 27s infinite linear;
}
@-webkit-keyframes spinMoon {
from { -webkit-transform: rotateY(0) translate3d(4px,0px,0px); }
to { -webkit-transform: rotateY(360deg) translate3d(4px,0px,0px); }
}
</style>
</head>
<body style="background-color:#939393; font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px; height:100%; line-height:1.45em; margin:0; padding:0;">
<!-- Container -->
<div id="container">
<!-- Header -->
<h1>instantreality 1.0</h1>
<div id="branding">
<a href="http://www.x3dom.org/" title="Home"></a>
</div>
<!-- END Header -->
<!-- Navigation -->
<div id="navigation">
<div id="menu_main"> </div>
</div>
<!-- Content -->
<div id="content">
<div id="content_right_column" style="margin-left:20px;">
<div class="post type-post hentry category-uncategorized" id="post-1007">
<div class="entry">
<h2>Mond und Erde (animiert mit CSS-Transforms)</h2>
<p><string>Hinweis:</strong> funktioniert derzeit nur auf WebKit-basierten Browsern (z.B. Chrome).</p>
<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace"
id="Solsystem" width="500px" height="400px">
<Scene>
<Background backUrl="realsky_BK.jpg" bottomUrl="realsky_DN.jpg"
frontUrl="realsky_FR.jpg" leftUrl="realsky_LF.jpg"
rightUrl="realsky_RT.jpg" topUrl="realsky_UP.jpg">
</Background>
<Transform id="earth">
<Shape>
<Appearance>
<!-- set specularColor to have some shiny specular highlights -->
<Material id="mat" diffuseColor="1 1 1" specularColor=".2 .2 .2">
</Material>
<Texture><img src="earth.jpg"></Texture>
</Appearance>
<Sphere radius="1.25"></Sphere>
</Shape>
</Transform>
<Transform id="moon">
<Shape>
<Appearance>
<Material USE="mat"></Material>
<Texture><img src="moon.jpg"></Texture>
</Appearance>
<Sphere radius="0.35"></Sphere>
</Shape>
</Transform>
<!-- an additional light to brighten up the scene -->
<DirectionalLight direction='0 -1 0' intensity="0.3"></DirectionalLight>
</Scene>
</X3D>
</div>
</div>
</div>
<!-- END Content -->
<div id="footer" class="clearfix"></div>
</div>
<!-- END Container -->
</body>
</html>