logo标签列表

CSS变换继承问题

htmlcsscss-animations
3
以下是HTML5和CSS3动画，我遇到了两个不同的问题，但我无法找到之前的答案适用于我的代码。我很好奇我是否在这里做错了什么。 我尝试了此问题中的解决方案和这个，但没有结果。 两个问题： 1）月球轨道变换良好；月球作为子元素也会变换。我尝试应用相反的变换，但似乎没有任何效果。 2）我正在尝试更改z-index，使月球位于行星后面。轨道边框是临时的，所以不用担心，但无论我将z-index设置为多少，都无法获得效果。 

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>

2个回答
2
关于你的第一个问题，你已经正确地应用了技术。但是有两个转换需要进行更正，一个来自圆形动画，你已经做过了，另一个来自轨道的倾斜（即rotateX（75度））。这是应用了更正后的演示。 

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>

关于第二个问题，最好的解决方法是一直在3D模式下工作，这样问题就会自动解决。另一个使问题更简单的技巧是链接变换。在我的演示中，我已经把所有东西都链接起来了，所以更容易控制（并且你有一个更简单的HTML）。 

body {
  height: 60%;
  top: 0px;
  bottom: 0px;
  background-color: #143856;
}
.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url(http://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(http://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

1
尝试使用 z-index 修复此问题，70% 的时间都会失败。呵呵，看到我这样做了吗？无论如何，最好的选择是使用关键帧来解决。创建一个关键帧来绘制路径，老实说，您需要其他一些东西，需要花费一些时间来解释，但我在此发布我的代码和演示，您将能够看到区别吗？
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; }

还需要一些简单的jQuery代码来实现3D效果，使其看起来像2D但移动时是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();
});

这里有一个演示。

我认为如果你使用我的代码，可能比修复你自己的代码更好。只是一个建议 ;)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接