I have a project where I am creating some planets and they need to rotate. I am a beginner currently in school. I found some code that rotates but It starts to skip. The alternative is to have it alternate in rotating but then that doesn't look right.
How can I fix this with CSS?
.earth {
width: 300px;
height: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}
.earth:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: -20px -20px 50px 2px #000 inset;
border-radius: 50%;
}
.earth > div {
width: 200%;
height: 100%;
animation: spin 30s linear infinite;
background: url(https://i.stack.imgur.com/3SLqF.jpg);
/*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
background-size: cover;
}
@keyframes spin {
to {
transform: translateX(-50%);
}
}
<div class="earth">
<div></div>
</div>
Here is the GIF image of the issue: https://imgur.com/a/f7nUtrW//
You need to make the width 400%
and not 200%
and instead of cover
use auto 100%
.
I have optimized the code a little so you can easily adjust the dimension and keep the circular shape:
.earth {
width: 300px;
display:inline-block;
margin: 5px;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
position:relative;
}
.earth:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: -20px -20px 50px 2px #000 inset;
border-radius: 50%;
}
.earth::before {
content: "";
display: block;
width: 400%;
padding-top:100%;
animation: spin 3s linear infinite;
background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
background-size: auto 100%;
}
@keyframes spin {
to {
transform: translateX(-50%);
}
}
<div class="earth">
</div>
<div class="earth" style="width:200px">
</div>
<div class="earth" style="width:100px">
</div>
Also like below with less of code and no pseudo element:
.earth {
--d:300px;
width: var(--d);
height:var(--d);
display:inline-block;
margin: 5px;
border-radius: 50%;
box-shadow: -20px -20px 50px 2px #000 inset, 0 0 20px 2px #000;
background:
url(https://i.stack.imgur.com/3SLqF.jpg)
0/auto 100%;
animation: spin 3s linear infinite;
}
@keyframes spin {
to {
background-position:200% 0;
}
}
<div class="earth">
</div>
<div class="earth" style="--d:200px">
</div>
<div class="earth" style="--d:100px">
</div>
You can add two stages to the keyframe specifying the x-position, as such:
@keyframes spin{
0% { background-position-x: 0; }
100% { background-position-x: -600px; }
}
I've added an snippet with the result:
.earth {
width: 300px;
height: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}
.earth:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: -20px -20px 50px 2px #000 inset;
border-radius: 50%;
}
.earth > div {
width: 200%;
height: 100%;
animation: spin 5s linear infinite;
background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
/*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
background-size: cover;
}
@keyframes spin{
0% { background-position-x: 0; }
100% { background-position-x: -600px; }
}
<div class="earth">
<div></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With