Are you looking to create a unique spatial experience for your website visitors? Consider building a “Coming Home” spatial experience using HTML and CSS. This type of design provides a dynamic and immersive environment that can leave a lasting impression on your audience. In this tutorial, we’ll show you how to create a “Coming Home” spatial experience from scratch, using only HTML and CSS. You’ll learn how to create the illusion of 3D space, add textures, and create movement to create a realistic and immersive environment. Plus, you’ll gain valuable experience in using CSS to create dynamic and responsive designs. So, let’s get started on creating a “Coming Home” spatial experience that will captivate your website visitors and leave them wanting more.
Before we start here are some more projects you might like to create –
- Duck Hunt Game using HTML and CSS
- 3D CSS Cards with Hover Effect
- IPhone X Design using HTML CSS and JavaScript
- CSS Glassmorphism Cards with Hover Effects
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Coming Home Spatial Experience using HTML and CSS - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
<section id="solar-system">
<div id="sun"></div>
<article id="mercury-trajectory">
<div id="mercury"></div>
</article>
<article id="venus-trajectory">
<div id="venus"></div>
</article>
<article id="earth-trajectory">
<div id="earth"></div>
</article>
<article id="mars-trajectory">
<div id="mars"></div>
</article>
</section>CSS Code
Create a file style.css and paste the code below.
:root {
--dark-color: rgb(0, 0, 0);
--glossy-red: rgba(238, 17, 17, 1);
--hidden-red: rgba(238, 17, 17, 0);
--light-red: rgba(238, 17, 17, 0.5);
--paths-theme: var(--very-light-red) var(--glossy-red);
--planets-theme: var(--light-red) var(--light-red) var(--light-red)
var(--glossy-red);
--very-light-red: rgba(238, 17, 17, 0.25);
}
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
overflow: hidden;
background-color: var(--dark-color);
}
body #solar-system {
display: flex;
width: 100vw;
height: 100vh;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
justify-content: center;
align-items: center;
}
/* ⚠ size of the sun is not respected here */
section #sun {
position: fixed;
z-index: 100;
/* ✑ real radius of the sun: 696340km */
width: 174.085px; /* ✑ 40* too small compared to the real planets dimensions values */
height: 174.085px;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: var(--glossy-red);
background: linear-gradient(
135deg,
var(--glossy-red) 20%,
var(--hidden-red) 100%
);
-webkit-background: linear-gradient(
135deg,
var(--glossy-red) 20%,
var(--hidden-red) 100%
);
-moz-background: linear-gradient(
135deg,
var(--glossy-red) 20%,
var(--hidden-red) 100%
);
-o-background: linear-gradient(
135deg,
var(--glossy-red) 20%,
var(--hidden-red) 100%
);
-ms-background: linear-gradient(
135deg,
var(--glossy-red) 20%,
var(--hidden-red) 100%
);
filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
-webkit-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
-moz-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
-o-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
-ms-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
}
/* planets */
article #mercury {
position: fixed;
z-index: 99;
top: 38px;
display: flex;
width: 24.397px; /* ✑ real radius of mercury: 24397km */
height: 24.397px;
/* ✑ rotation period of mercury: 58.645 days */
-webkit-animation: planets-rotation 29.3225s linear infinite;
-moz-animation: planets-rotation 29.3225s linear infinite;
-ms-animation: planets-rotation 29.3225s linear infinite;
-o-animation: planets-rotation 29.3225s linear infinite;
animation: planets-rotation 29.3225s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--planets-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: var(--hidden-red);
justify-content: center;
align-items: center;
}
article #venus {
position: fixed;
z-index: 99;
top: 15px;
display: flex;
width: 60.518px; /* ✑ real radius of venus: 60518km */
height: 60.518px;
/* ✑ rotation period of venus 243.023 days */
-webkit-animation: planets-rotation 121.513s linear infinite;
-moz-animation: planets-rotation 121.513s linear infinite;
-ms-animation: planets-rotation 121.513s linear infinite;
-o-animation: planets-rotation 121.513s linear infinite;
animation: planets-rotation 121.513s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--planets-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: var(--hidden-red);
justify-content: center;
align-items: center;
}
article #earth {
position: fixed;
z-index: 99;
top: 35px;
display: flex;
width: 63.71px; /* ✑ real radius of the earth: 6371km */
height: 63.71px;
/* ✑ animation-duration: .5s = 24hours on earth */
-webkit-animation: planets-rotation 0.4874s linear infinite;
-moz-animation: planets-rotation 0.4874s linear infinite;
-ms-animation: planets-rotation 0.4874s linear infinite;
-o-animation: planets-rotation 0.4874s linear infinite;
animation: planets-rotation 0.4874s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--planets-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: var(--hidden-red);
justify-content: center;
align-items: center;
}
article #earth::after {
position: inherit;
width: 40%;
height: 40%;
content: "";
-webkit-animation: earth-blinking 2s linear infinite;
-moz-animation: earth-blinking 2s linear infinite;
-ms-animation: earth-blinking 2s linear infinite;
-o-animation: earth-blinking 2s linear infinite;
animation: earth-blinking 2s linear infinite;
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: var(--glossy-red);
-webkit-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-moz-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-o-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-ms-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
}
article #mars {
position: fixed;
z-index: 99;
top: 288px;
display: flex;
width: 33.895px; /* ✑ real radius of mars: 33895km */
height: 33.895px;
/* ✑ animation-duration: .5s = 24hours on earth */
-webkit-animation: planets-rotation 0.5128s linear infinite;
-moz-animation: planets-rotation 0.5128s linear infinite;
-ms-animation: planets-rotation 0.5128s linear infinite;
-o-animation: planets-rotation 0.5128s linear infinite;
animation: planets-rotation 0.5128s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--planets-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: var(--hidden-red);
justify-content: center;
align-items: center;
}
article #mars::after,
article #venus::after,
article #mercury::after {
width: 40%;
height: 40%;
content: "";
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: var(--glossy-red);
-webkit-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-moz-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-o-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
-ms-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
}
/* planets trajectory's
⚠ the distances between the planets and the sun are not respected here because of the diameter ot it */
section #mercury-trajectory {
position: fixed;
z-index: 98;
width: 203.085px; /* ✑ non-proportional */
height: 203.085px;
/* ✑ revolution of mercury: 87.969 days */
-webkit-animation: solar-revolution 43.9845s linear infinite;
-moz-animation: solar-revolution 43.9845s linear infinite;
-ms-animation: solar-revolution 43.9845s linear infinite;
-o-animation: solar-revolution 43.9845s linear infinite;
animation: solar-revolution 43.9845s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--paths-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
section #venus-trajectory {
position: fixed;
z-index: 98;
width: 257.085px; /* ✑ non-proportional */
height: 257.085px;
/* ✑ revolution of venus: 224.667 days */
-webkit-animation: solar-revolution 112.3335s linear infinite;
-moz-animation: solar-revolution 112.3335s linear infinite;
-ms-animation: solar-revolution 112.3335s linear infinite;
-o-animation: solar-revolution 112.3335s linear infinite;
animation: solar-revolution 112.3335s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--paths-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
section #earth-trajectory {
position: fixed;
z-index: 98;
width: 332.085px; /* ✑ non-proportional */
height: 332.085px;
/* ✑ revolution of the earth: 365.2422 days */
-webkit-animation: solar-revolution 182.6211s linear infinite;
-moz-animation: solar-revolution 182.6211s linear infinite;
-ms-animation: solar-revolution 182.6211s linear infinite;
-o-animation: solar-revolution 182.6211s linear infinite;
animation: solar-revolution 182.6211s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--paths-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
section #mars-trajectory {
position: fixed;
z-index: 98;
width: 446.085px; /* ✑ non-proportional */
height: 446.085px;
/* ✑ revolution of mars: 686.885 days */
-webkit-animation: solar-revolution 343.4425s linear infinite;
-moz-animation: solar-revolution 343.4425s linear infinite;
-ms-animation: solar-revolution 343.4425s linear infinite;
-o-animation: solar-revolution 343.4425s linear infinite;
animation: solar-revolution 343.4425s linear infinite;
border-width: 2px;
border-style: solid;
border-color: var(--paths-theme);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*
▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
*/
@keyframes solar-revolution {
to {
transform: rotate(360deg);
}
}
@keyframes planets-rotation {
to {
transform: rotate(360deg);
}
}
@keyframes earth-blinking {
from {
background-color: var(--glossy-red);
filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
}
to {
background-color: var(--dark-color);
filter: drop-shadow(0 0 0 var(--light-red)) blur(0);
}
}
/* media queries
smartphone*/
@media only screen and (max-width: 768px) {
section #sun {
width: 87.0425px;
height: 87.0425px;
}
section #mercury-trajectory {
width: 101.5425px;
height: 101.5425px;
}
article #mercury {
top: 17px;
width: 12.1985px;
height: 12.1985px;
}
section #venus-trajectory {
width: 128.5425px;
height: 128.5425px;
}
article #venus {
top: 6px;
width: 30.259px;
height: 30.259px;
}
section #earth-trajectory {
width: 166.0425px;
height: 166.0425px;
}
article #earth {
top: 16px;
width: 31.855px;
height: 31.855px;
}
section #mars-trajectory {
width: 223.0425px;
height: 223.0425px;
}
article #mars {
top: 56px;
width: 16.9475px;
height: 16.9475px;
}
}
/* 4K Ultra HD */
@media only screen and (min-width: 1921px) {
section #sun {
width: 348.17px;
height: 348.17px;
}
section #mercury-trajectory {
width: 406.17px;
height: 406.17px;
}
article #mercury {
top: 82px;
width: 48.794px; /* ✑ real diameter of mercury: 4879.4km*/
height: 48.794px;
}
section #venus-trajectory {
width: 514.17px;
height: 514.17px;
}
article #venus {
top: 28px;
width: 121.036px; /* ✑ real diameter of venus: 12103.6km */
height: 121.036px;
}
section #earth-trajectory {
width: 664.17px;
height: 664.17px;
}
article #earth {
top: 68px;
width: 127.42px; /* ✑ real diameter of the earth: 12742km */
height: 127.42px;
}
section #mars-trajectory {
width: 892.14px;
height: 892.14px;
}
article #mars {
top: 242px;
width: 67.79px; /* ✑ real diameter of mars: 6779km */
height: 67.79px;
}
}Final Output
Written by: Piyush Patil
Code Credits: @delvignefred
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
