After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star.
- Earth:
- Sun:
I made changes to the code provided in the original question by integrating these images into the circles and adjusting the animations for a more realistic representation of Earth's movement around the Sun. Here is the modified code snippet:
MODIFIED CODE: This is the updated version with images included:
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
background-image: url("https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg");
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
background-image: url("https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand");
}
@-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
@-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
@-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>