Wireframe solar system
How do I make an wireframe solar system?
What is a wireframe solar system? How do you make a wireframe solar system? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.
Wireframe solar system Previews
Wireframe solar system - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wireframe solar system</title> <meta name="viewport" content="width-device-width, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .space { height: 100%; background: #111; perspective: 500;
}
.solarsystem { height: 100%; transform: rotateX(40deg) rotateY(0deg) translateY(-50px);
}
.planet-wrapper { position: absolute; width: 100%; height: 100%;
}
.object { position: absolute; left: 50%; top: 50%;
}
.sun { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border-radius: 25px; background: yellow;
}
.planet { border: 1px solid white;
}
@keyframes orbit-mercury { from { transform: rotate(0deg) translateY(50px); } to { transform: rotate(360deg) translateY(50px); }
}
.mercury .planet { width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 4px; animation: orbit-mercury 2s infinite linear; background: #111;
}
.mercury .planet:before { position: absolute; left: 4px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 60px; height: 60px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 60px 0;
}
.mercury .planet:after { position: absolute; top: -46px; left: 3px; width: 1px; height: 50px; background: #333;
}
.mercury .path { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 50px; border: 1px dashed #333;
}
@keyframes orbit-venus { from { transform: rotate(0deg) translateY(80px); } to { transform: rotate(360deg) translateY(80px); }
}
.venus .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-venus 5s infinite linear; background: #111;
}
.venus .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.venus .planet:after { position: absolute; top: -70px; left: 9px; width: 1px; height: 80px; background: #333;
}
.venus .path { position: absolute; width: 160px; height: 160px; left: 50%; top: 50%; margin-top: -80px; margin-left: -80px; border-radius: 80px; border: 1px dashed #333;
}
@keyframes orbit-earth { from { transform: rotate(0deg) translateY(100px); } to { transform: rotate(360deg) translateY(100px); }
}
.earth .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-earth 10s infinite linear; background: #111;
}
.earth .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.earth .planet:after { position: absolute; top: -90px; left: 9px; width: 1px; height: 100px; background: #333;
}
.earth .path { position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; border-radius: 100px; border: 1px dashed #333;
}
@keyframes orbit-mars { from { transform: rotate(0deg) translateY(120px); } to { transform: rotate(360deg) translateY(120px); }
}
.mars .planet { width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; border-radius: 5px; animation: orbit-mars 15s infinite linear; background: #111;
}
.mars .planet:before { position: absolute; left: 5px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 75px; height: 75px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 75px 0;
}
.mars .planet:after { position: absolute; top: -115px; left: 4px; width: 1px; height: 120px; background: #333;
}
.mars .path { position: absolute; width: 240px; height: 240px; left: 50%; top: 50%; margin-top: -120px; margin-left: -120px; border-radius: 120px; border: 1px dashed #333;
}
@keyframes orbit-jupiter { from { transform: rotate(0deg) translateY(160px); } to { transform: rotate(360deg) translateY(160px); }
}
.jupiter .planet { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; border-radius: 18px; animation: orbit-jupiter 20s infinite linear; background: #111;
}
.jupiter .planet:before { position: absolute; left: 18px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 270px; height: 270px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 270px 0;
}
.jupiter .planet:after { position: absolute; top: -142px; left: 17px; width: 1px; height: 160px; background: #333;
}
.jupiter .path { position: absolute; width: 320px; height: 320px; left: 50%; top: 50%; margin-top: -160px; margin-left: -160px; border-radius: 160px; border: 1px dashed #333;
}
@keyframes orbit-saturn { from { transform: rotate(0deg) translateY(200px); } to { transform: rotate(360deg) translateY(200px); }
}
.saturn .planet { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; border-radius: 12px; animation: orbit-saturn 22s infinite linear; background: #111;
}
.saturn .planet:before { position: absolute; left: 12px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 180px; height: 180px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 180px 0;
}
.saturn .planet:after { position: absolute; top: -188px; left: 11px; width: 1px; height: 200px; background: #333;
}
.saturn .path { position: absolute; width: 400px; height: 400px; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; border-radius: 200px; border: 1px dashed #333;
}
@keyframes orbit-uranus { from { transform: rotate(0deg) translateY(230px); } to { transform: rotate(360deg) translateY(230px); }
}
.uranus .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-uranus 26s infinite linear; background: #111;
}
.uranus .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.uranus .planet:after { position: absolute; top: -220px; left: 9px; width: 1px; height: 230px; background: #333;
}
.uranus .path { position: absolute; width: 460px; height: 460px; left: 50%; top: 50%; margin-top: -230px; margin-left: -230px; border-radius: 230px; border: 1px dashed #333;
}
@keyframes orbit-neptune { from { transform: rotate(0deg) translateY(280px); } to { transform: rotate(360deg) translateY(280px); }
}
.neptune .planet { width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 7px; animation: orbit-neptune 28s infinite linear; background: #111;
}
.neptune .planet:before { position: absolute; left: 7px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 105px; height: 105px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 105px 0;
}
.neptune .planet:after { position: absolute; top: -273px; left: 6px; width: 1px; height: 280px; background: #333;
}
.neptune .path { position: absolute; width: 560px; height: 560px; left: 50%; top: 50%; margin-top: -280px; margin-left: -280px; border-radius: 280px; border: 1px dashed #333;
}
html,
body { height: 100%;
}
* { position: relative; box-sizing: border-box;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="space"> <div class="solarsystem"> <div class="object sun"></div> <div class="planet-wrapper neptune"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper uranus"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper saturn"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper jupiter"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper mars"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper earth"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper venus"> <div class="path"></div> <div class="object planet"></div> </div> <div class="planet-wrapper mercury"> <div class="path"></div> <div class="object planet"></div> </div> <div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Wireframe solar system - Script Codes CSS Codes
.space { height: 100%; background: #111; perspective: 500;
}
.solarsystem { height: 100%; transform: rotateX(40deg) rotateY(0deg) translateY(-50px);
}
.planet-wrapper { position: absolute; width: 100%; height: 100%;
}
.object { position: absolute; left: 50%; top: 50%;
}
.sun { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border-radius: 25px; background: yellow;
}
.planet { border: 1px solid white;
}
@keyframes orbit-mercury { from { transform: rotate(0deg) translateY(50px); } to { transform: rotate(360deg) translateY(50px); }
}
.mercury .planet { width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 4px; animation: orbit-mercury 2s infinite linear; background: #111;
}
.mercury .planet:before { position: absolute; left: 4px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 60px; height: 60px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 60px 0;
}
.mercury .planet:after { position: absolute; top: -46px; left: 3px; width: 1px; height: 50px; background: #333;
}
.mercury .path { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; border-radius: 50px; border: 1px dashed #333;
}
@keyframes orbit-venus { from { transform: rotate(0deg) translateY(80px); } to { transform: rotate(360deg) translateY(80px); }
}
.venus .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-venus 5s infinite linear; background: #111;
}
.venus .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.venus .planet:after { position: absolute; top: -70px; left: 9px; width: 1px; height: 80px; background: #333;
}
.venus .path { position: absolute; width: 160px; height: 160px; left: 50%; top: 50%; margin-top: -80px; margin-left: -80px; border-radius: 80px; border: 1px dashed #333;
}
@keyframes orbit-earth { from { transform: rotate(0deg) translateY(100px); } to { transform: rotate(360deg) translateY(100px); }
}
.earth .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-earth 10s infinite linear; background: #111;
}
.earth .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.earth .planet:after { position: absolute; top: -90px; left: 9px; width: 1px; height: 100px; background: #333;
}
.earth .path { position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; border-radius: 100px; border: 1px dashed #333;
}
@keyframes orbit-mars { from { transform: rotate(0deg) translateY(120px); } to { transform: rotate(360deg) translateY(120px); }
}
.mars .planet { width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; border-radius: 5px; animation: orbit-mars 15s infinite linear; background: #111;
}
.mars .planet:before { position: absolute; left: 5px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 75px; height: 75px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 75px 0;
}
.mars .planet:after { position: absolute; top: -115px; left: 4px; width: 1px; height: 120px; background: #333;
}
.mars .path { position: absolute; width: 240px; height: 240px; left: 50%; top: 50%; margin-top: -120px; margin-left: -120px; border-radius: 120px; border: 1px dashed #333;
}
@keyframes orbit-jupiter { from { transform: rotate(0deg) translateY(160px); } to { transform: rotate(360deg) translateY(160px); }
}
.jupiter .planet { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; border-radius: 18px; animation: orbit-jupiter 20s infinite linear; background: #111;
}
.jupiter .planet:before { position: absolute; left: 18px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 270px; height: 270px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 270px 0;
}
.jupiter .planet:after { position: absolute; top: -142px; left: 17px; width: 1px; height: 160px; background: #333;
}
.jupiter .path { position: absolute; width: 320px; height: 320px; left: 50%; top: 50%; margin-top: -160px; margin-left: -160px; border-radius: 160px; border: 1px dashed #333;
}
@keyframes orbit-saturn { from { transform: rotate(0deg) translateY(200px); } to { transform: rotate(360deg) translateY(200px); }
}
.saturn .planet { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; border-radius: 12px; animation: orbit-saturn 22s infinite linear; background: #111;
}
.saturn .planet:before { position: absolute; left: 12px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 180px; height: 180px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 180px 0;
}
.saturn .planet:after { position: absolute; top: -188px; left: 11px; width: 1px; height: 200px; background: #333;
}
.saturn .path { position: absolute; width: 400px; height: 400px; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; border-radius: 200px; border: 1px dashed #333;
}
@keyframes orbit-uranus { from { transform: rotate(0deg) translateY(230px); } to { transform: rotate(360deg) translateY(230px); }
}
.uranus .planet { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 10px; animation: orbit-uranus 26s infinite linear; background: #111;
}
.uranus .planet:before { position: absolute; left: 10px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 150px; height: 150px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 150px 0;
}
.uranus .planet:after { position: absolute; top: -220px; left: 9px; width: 1px; height: 230px; background: #333;
}
.uranus .path { position: absolute; width: 460px; height: 460px; left: 50%; top: 50%; margin-top: -230px; margin-left: -230px; border-radius: 230px; border: 1px dashed #333;
}
@keyframes orbit-neptune { from { transform: rotate(0deg) translateY(280px); } to { transform: rotate(360deg) translateY(280px); }
}
.neptune .planet { width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 7px; animation: orbit-neptune 28s infinite linear; background: #111;
}
.neptune .planet:before { position: absolute; left: 7px; background: linear-gradient(315deg, transparent 30%, rgba(0, 0, 0, 0.5)); width: 105px; height: 105px; transform-origin: 0 0; transform: rotate(45deg); border-radius: 0 0 105px 0;
}
.neptune .planet:after { position: absolute; top: -273px; left: 6px; width: 1px; height: 280px; background: #333;
}
.neptune .path { position: absolute; width: 560px; height: 560px; left: 50%; top: 50%; margin-top: -280px; margin-left: -280px; border-radius: 280px; border: 1px dashed #333;
}
html,
body { height: 100%;
}
* { position: relative; box-sizing: border-box;
}
| Developer | Daniel Grant |
| Username | djgrant |
| Uploaded | December 28, 2022 |
| Rating | 3 |
| Size | 4,856 Kb |
| Views | 8,096 |
Do you need developer help for Wireframe solar system?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Daniel Grant (djgrant) Script Codes
| Name | Size |
| Loading bar for ajax pages | 2,464 Kb |
| Transitioning application screens with semantically named classes | 3,697 Kb |
| Number input with controls | 2,867 Kb |
| Grid crosshairs | 2,193 Kb |
| A Pen by Daniel Grant | 2,464 Kb |
| CSS triangles with border | 3,146 Kb |
| Responsive Tabs | 3,473 Kb |
| Touch rem | 2,979 Kb |
| Auto expanding input addons | 3,140 Kb |
| Gradient Border | 2,600 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| The CodePen Logo | Kindofone | 4,259 Kb |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| Speech bubbles | Something | 1,547 Kb |
| Sticky div | Kaslab | 2,225 Kb |
| Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
| Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
| 700 Synapses Per Second | Silentkrange | 2,138 Kb |
| Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
| Flat UI Button | Honchoman | 2,289 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!