3

The following HTML5 and CSS3 animation is giving me two different issues and I've not been able to find previous answers to the question that have worked on my code. I'm curious if I'm doing something completely wrong here.

I have tried the solutions in this question, and this one with no results.

The two issues: 1.) The moon orbit transforms fine; the moon, as a child element, transforms as well. I attempt to apply the opposite transform but it doesn't appear to have any effect.

2.) I'm trying to alter the z-index so the moon goes behind the planet. The orbit border is temporary so no worries there but no matter what I set the z-index to I can't get the effect.

body {
  height: 100%;
  top: 0px;
  bottom: 0px;
  margin-top: 300px;
  background-color: #143856;
}
.moonorbit {
  position: relative;
  top: -249px;
  left: 309px;
  width: 500px;
  height: 500px;
  border: 2px solid white;
  border-radius: 50%;
  -moz-transform: rotateX(75deg);
  -webkit-transform: rotateX(75deg);
  -o-transform: rotateX(75deg);
  -ms-transform: rotateX(75deg);
  transform: rotateX(75deg);
}
.mooncontainer {
  position: absolute;
  top: 175px;
  left: 175px;
  width: 150px !important;
  height: 150px;
  -moz-transform: rotateX(-75deg);
  -webkit-transform: rotateX(-75deg);
  -o-transform: rotateX(-75deg);
  -ms-transform: rotateX(-75deg);
  transform: rotateX(-75deg);
  animation: moon-orbit 10s linear infinite;
}
.moon {
  width: 150px !important;
  height: 150px;
  border-radius: 50%;
  background: red url(img/planets_MOON.png) no-repeat;
  background-size: cover;
  animation: rotate 10s linear infinite;
}
.earth {
  position: absolute;
  width: 417px;
  top: 100px;
  left: 350px;
  z-index: 0;
  height: 209px;
}
.earth .planet {
  /*width: 417px !important;
            height: 417px;*/
  width: 300px !important;
  height: 300px;
  background: yellow url(img/planets_EARTH.png) no-repeat;
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto;
}
/*Moon Orbit*/

@keyframes moon-orbit {
  0% {
    transform: rotateZ(0deg) translateX(250px);
  }
  100% {
    transform: rotateZ(360deg) translateX(250px);
  }
}
@keyframes rotate {
  0% {
    z-index: 5;
    transform: rotateZ(0deg);
  }
  25% {
    z-index: -5;
  }
  50% {
    z-index: -5;
  }
  75% {
    z-index: 5;
  }
  100% {
    z-index: 5;
    transform: rotateZ(-360deg);
  }
}
<body>
  <div class="earth">
    <div class="planet"></div>
  </div>
  <div class="moonorbit">
    <div class="mooncontainer">
      <div class="moon"></div>
    </div>
  </div>
</body>
Random
  • 3,158
  • 1
  • 15
  • 25
Sgiobair
  • 305
  • 2
  • 9

2 Answers2

2

About your first issue, you are applying the technique ok. But there are 2 transformations that you need to correct, the one from the animation of the circle, that you have done, and the one from the inclination of the orbit (the rotateX(75deg)

This would be your demo with the correction applied

body {
  height: 60%;
  top: 0px;
  bottom: 0px;
  margin-top: 300px;
  background-color: #143856;
}
.moonorbit {
  position: relative;
  top: -300px;
  left: 209px;
  width: 500px;
  height: 500px;
  border: 2px solid white;
  border-radius: 50%;
  transform: rotateX(75deg);
  transform-style: preserve-3d;
}
.mooncontainer {
  position: absolute;
  top: 175px;
  left: 175px;
  width: 150px !important;
  height: 150px;
  -webkit-transform: rotateX(-75deg);
  transform: rotateX(-75deg);
  animation: moon-orbit 10s linear infinite;
  transform-style: preserve-3d;
}
.moon {
  width: 150px !important;
  height: 150px;
  border-radius: 50%;
  background-color: white;
  background-size: cover;
  animation: rotate 10s linear infinite;
  transform-style: preserve-3d;
}
.earth {
  position: absolute;
  width: 417px;
  top: 100px;
  left: 250px;
  z-index: 0;
  height: 209px;
}
.earth .planet {
  /*width: 417px !important;
   height: 417px;*/
  width: 300px !important;
  height: 300px;
  background-color: lightgreen;
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto;
}
/*Moon Orbit*/

@keyframes moon-orbit {
  0% {
    transform: rotateZ(0deg) translateX(250px);
  }
  100% {
    transform: rotateZ(360deg) translateX(250px);
  }
}
@keyframes rotate {
  0% {
    transform: rotateZ(0deg) rotateX(-75deg);   /* added rotateX(-75deg) to compensate */
  }
  100% {
    transform:  rotateZ(-360deg) rotateX(-75deg);
  }
}
  <div class="earth">
    <div class="planet"></div>
  </div>
  <div class="moonorbit">
    <div class="mooncontainer">
      <div class="moon"></div>
    </div>
  </div>

About the second issue, your best bet is to work all the time in 3d, so it will be automatically solved. Another technique that makes it simpler is to chain the transforms. In my demo I have chained everything, so it's easier to get the control (and you have a simpler HTML

body {
  height: 60%;
  top: 0px;
  bottom: 0px;
  background-color: #143856;
}
.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url(https://i.stack.imgur.com/L3IE5.jpg);
  background-size: 120%;
  background-position: center center;
  animation: rotate 10s linear infinite;
  transform-style: preserve-3d;
  margin: auto;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.earth {
  position: absolute;
  width: 300px;
  height: 300px;
  background: url(https://i.stack.imgur.com/5sqwZ.jpg);
  background-size: 140%;
  background-position: center center;
  border-radius: 50%;
  margin: 100px 200px;
  perspective: 1500px;
  transform-style: preserve-3d;
}

@keyframes rotate {
  0% {
    transform: rotateX(-75deg) rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateX(75deg);
  }
  100% {
    transform: rotateX(-75deg) rotateZ(-360deg) translateX(300px) rotateZ(360deg) rotateX(75deg);
  }
}
<div class="earth">
      <div class="moon"></div>
  </div>

earth moon

vals
  • 61,425
  • 11
  • 89
  • 138
1

Trying to fix this with z-index will end in failure 70% all the time. lol See what I did there? Anyways, your best bet is to do this with a keyframes. Create a keyframe to draw out your path and to be honest you will need other things that would take a while to explain but How about I'll post my code here and the DEMO and you will be able to see the difference?

HTML

<div id="universe" class="scale-stretched">
    <div id="solar-system" class="earth">
      <div id="earth" class="orbit">
        <div class="pos">
          <div class="planet"> </div>
        </div>
      </div>
      <div id="sun"> </div>
    </div>
</div>

CSS

#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover; }

#solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; }

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.orbit .orbit {
  animation-name: suborbit; }

.pos {
  position: absolute;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

#sun, .planet, #earth{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; }

#sun {
  background-color: #FB7209;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }

.planet {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%; }

#earth {
  z-index: 8; }

#sun {
  z-index: 1; }


@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

.view-3D #solar-system {
  transform: rotateX(75deg); }

.view-3D #sun {
  transform: rotateX(-90deg); }

#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 12.00021s; }

#earth .orbit .pos,
#earth .orbit {
  animation-duration: 0.89764s; }

.scale-stretched #sun {
  font-size: 24em; }

.scale-stretched #earth .planet {
  font-size: 3.92em; }

.scale-stretched #earth.orbit {
  width: 56em;
  height: 56em;
  margin-top: -28em;
  margin-left: -28em; }


body { background: #000; }

#sun { background: yellow; }

#earth .planet { background: blue; }

And some simple jQuery to get the 3D effect so it looks 2D but moves 3D 

$(window).load(function(){
  var body = $("body"),
      universe = $("#universe"),
      solarsys = $("#solar-system");

  var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
      $(this).removeClass('hide-UI').addClass("set-speed");
      $(this).dequeue();
    });
  };

  init();
});

Here is a DEMO

I think if you use my code you'll probably be better off than fixing yours. Just a suggestion ;)

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140