A real moving Solar System with all planets free code
Preview
index.html
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Real 3D Solar System</title>5
<style>6
body {7
background-color: black;8
}9
10
#solar-system {11
position: relative;12
width: 600px;13
height: 600px;14
margin: 0 auto;15
perspective: 1000px;16
}17
18
#sun {19
position: absolute;20
top: 50%;21
left: 50%;22
transform: translate(-50%, -50%);23
width: 100px;24
height: 100px;25
background-color: darkorange;26
border-radius: 50%;27
animation: rotate-sun 10s linear infinite;28
}29
30
.planet {31
position: absolute;32
width: 30px;33
height: 30px;34
border-radius: 50%;35
animation-duration: 5s;36
animation-timing-function: linear;37
animation-iteration-count: infinite;38
}39
40
#mercury {41
top: 50%;42
left: 50%;43
transform: translate(-50%, -50%);44
background-color: #bfbfbf;45
animation: rotate-mercury 4s linear infinite;46
}47
48
#venus {49
top: 50%;50
left: 50%;51
transform: translate(-50%, -50%);52
background-color: #ffcc66;53
animation: rotate-venus 6s linear infinite;54
}55
56
#earth {57
top: 50%;58
left: 50%;59
transform: translate(-50%, -50%);60
background-color: #0099ff;61
animation: rotate-earth 8s linear infinite;62
}63
64
#mars {65
top: 50%;66
left: 50%;67
transform: translate(-50%, -50%);68
background-color: #ff3300;69
animation: rotate-mars 10s linear infinite;70
}71
72
#jupiter {73
top: 50%;74
left: 50%;75
transform: translate(-50%, -50%);76
background-color: #ff9900;77
animation: rotate-jupiter 12s linear infinite;78
}79
80
#saturn {81
top: 50%;82
left: 50%;83
transform: translate(-50%, -50%);84
background-color: #ffcc00;85
animation: rotate-saturn 14s linear infinite;86
}87
88
#uranus {89
top: 50%;90
left: 50%;91
transform: translate(-50%, -50%);92
background-color: #66ccff;93
animation: rotate-uranus 16s linear infinite;94
}95
96
#neptune {97
top: 50%;98
left: 50%;99
transform: translate(-50%, -50%);100
background-color: #0000ff;101
animation: rotate-neptune 18s linear infinite;102
}103
104
@keyframes rotate-sun {105
0% {106
transform: translate(-50%, -50%) rotate(0deg);107
}108
100% {109
transform: translate(-50%, -50%) rotate(360deg);110
}111
}112
113
@keyframes rotate-mercury {114
0% {115
transform: translate(-50%, -50%) rotate(0deg) translateX(100px);116
}117
100% {118
transform: translate(-50%, -50%) rotate(360deg) translateX(100px);119
}120
}121
122
@keyframes rotate-venus {123
0% {124
transform: translate(-50%, -50%) rotate(0deg) translateX(150px);125
}126
100% {127
transform: translate(-50%, -50%) rotate(360deg) translateX(150px);128
}129
}130
131
@keyframes rotate-earth {132
0% {133
transform: translate(-50%, -50%) rotate(0deg) translateX(200px);134
}135
100% {136
transform: translate(-50%, -50%) rotate(360deg) translateX(200px);137
}138
}139
140
@keyframes rotate-mars {141
0% {142
transform: translate(-50%, -50%) rotate(0deg) translateX(250px);143
}144
100% {145
transform: translate(-50%, -50%) rotate(360deg) translateX(250px);146
}147
}148
149
@keyframes rotate-jupiter {150
0% {151
transform: translate(-50%, -50%) rotate(0deg) translateX(300px);152
}153
100% {154
transform: translate(-50%, -50%) rotate(360deg) translateX(300px);155
}156
}157
158
@keyframes rotate-saturn {159
0% {160
transform: translate(-50%, -50%) rotate(0deg) translateX(350px);161
}162
100% {163
transform: translate(-50%, -50%) rotate(360deg) translateX(350px);164
}165
}166
167
@keyframes rotate-uranus {168
0% {169
transform: translate(-50%, -50%) rotate(0deg) translateX(400px);170
}171
100% {172
transform: translate(-50%, -50%) rotate(360deg) translateX(400px);173
}174
}175
176
@keyframes rotate-neptune {177
0% {178
transform: translate(-50%, -50%) rotate(0deg) translateX(450px);179
}180
100% {181
transform: translate(-50%, -50%) rotate(360deg) translateX(450px);182
}183
}184
</style>185
</head>186
<body>187
<div id="solar-system">188
<div id="sun"></div>189
<div id="mercury" class="planet"></div>190
<div id="venus" class="planet"></div>191
<div id="earth" class="planet"></div>192
<div id="mars" class="planet"></div>193
<div id="jupiter" class="planet"></div>194
<div id="saturn" class="planet"></div>195
<div id="uranus" class="planet"></div>196
<div id="neptune" class="planet"></div>197
</div>198
</body>199
</html>200
styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */