Why the earth can't rotate as an image?

Question

The earth is rotating in original codes:

<style>
.earth {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
  width: 677px;
 height: 677px;
 background: url(http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg);
 border-radius: 50%;
 background-size: cover;
 box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0),
  inset 0 0 20px 2px rgba(255, 255, 255, 0.2);
 animation-direction:normal;
 animation-name: rotate;
 animation-duration: 4s;
 animation-iteration-count: infinite;
 !--animation-timing-function: linear;--!
 animation-fill:forwards;
}
@keyframes rotate {
    0% {background-position: 0 0;}
  100% {background-position: 1024px 0;}
 }
.earth:hover{
    -webkit-animation-play-state:paused;
}

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }


</style>
<div class="earth"></div>

But why it is static as an image below? And the hover feature is not working either.

<style>
.earth {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
   width: 677px;
 height: 677px; 
 border-radius: 50%;
 box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0),
  inset 0 0 20px 2px rgba(255, 255, 255, 0.2);
 animation-direction:normal;
 animation-name: rotate;
 animation-duration: 4s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-fill:forwards;
}
@keyframes rotate {
    0% {position: 0px 0px;}
  100% {position: 1024px 0px;}
 }
.earth:hover{
    -webkit-animation-play-state:paused;
}

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }


</style>
<div>
<img src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" class="earth"/>
<map name="map">
  <area shape="poly" coords="224,330,239,325" href="images/diru.png" alt="" class="hover_img">
</map>
</div>

I want to draw a rotating earth with showing another image at hover the map hotspot. But I find the codes works fine if I use back-ground image in CSS, it fails if the just putting the image into the page. And the hover feature fails, it needs to click the map hotspot to show the new image. And I need a feature to return to the earth image when click any place in new image screen. Please help!

Step 1: Validate your CSS. You managed to stick weird characters in there like `top:0；`, which is not a normal semicolon, but something else (makes this and the following bottom property invalid), you managed to eff up copy&paste by making `background-size` into the non-existing property `size`, ... — CBroe, Sep 05 '17 at 08:08
Thank you for the notes. I fixed the issues, but still the 2nd codes fail to rotating the earth. — arexw, Sep 05 '17 at 09:06
relevant : https://stackoverflow.com/questions/16771225/css3-rotate-animation — Abr001am, Sep 05 '17 at 09:32
Dear Idle001, thank you for the link, but this example is about the image spin. I need resolution about the rotate animation. — arexw, Sep 05 '17 at 09:55
@arexw it's good you removed the background attributes from second example, now you have to configure image coordinates for each rotation status (keyframes) — Abr001am, Sep 05 '17 at 10:14
for your information a background image dosn't work as a 'src' attribute of an image, for this case i'm afraid you have to slide it — Abr001am, Sep 05 '17 at 10:21
@arexw i don't know if that satisfies your needs https://codepen.io/anon/pen/MvRJVO , it's just a slide in/out of same image, you need just to add a css handler for mouse hovering — Abr001am, Sep 05 '17 at 10:52

Abr001am · Answer 1 · 2017-09-05T12:44:26.193

The secret behind why the background is wheeling arround the container in the first example is that its position on the top is not proportional to its size since the last one is set to "cover" the whole void, which means the background image should always cover the container's space no matter the position it starts from.

As an image child-tag it's different as far there is no other option, it's left as a useful solution to slide two img 's through the container, to give an impression of rotation.

.earth {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 1000px;
    height: 500px;
    margin:0px 0 0 0px;
    animation: slide 1s infinite;
    -webkit-animation: slide 5s infinite;
    -webkit-animation-delay: 1s;
    
}
.earth2 {
    position: absolute;
    top: 10%;
    left: 100%;
    width: 1000px;
    height: 500px;
    margin:0px 0 0 0px;
    animation: slide2 1s infinite;
    -webkit-animation: slide2 5s infinite;
    -webkit-animation-delay: 1s;
    
}


@keyframes slide {
  0% { left: 0%; }
  100% { left: -100%; }
}
@keyframes slide2 {
  0% { left: 100%; }
  100% { left: 0%; }
}

#container:hover > [class^="earth"]  {
animation-play-state: paused;
}

#container {
position: relative;
border-radius: 50%;
box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0),inset 0 0 20px 2px 
rgba(255, 255, 255, 0.2);
height:560px;
width: 1000px;
overflow:auto;
}

<div id="container">
<img  class="earth" src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" />
<img  class="earth2" src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" />
<div/>

For the container style you need just to set overflow:auto and position:relative to keep the alternating images stranded between the bounds.

Why the earth can't rotate as an image?

1 Answers1