如何旋转旋转木马项目和隐藏最远的一个

我打算设计一个有卫星的地球。地球可以自己自转，卫星是公转的。我有像卫星一样绕地球转的旋转木马项目，但我不知道如何制作它后面的项目。

var carousel = $(".carousel"),
  currdeg = 0;
$(".next").on("click", {
  d: "n"
}, rotate);
$(".prev").on("click", {
  d: "p"
}, rotate);
function rotate(e) {
  if (e.data.d == "n") {
    currdeg = currdeg - 60;
  }
  if (e.data.d == "p") {
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY(" + currdeg + "deg)",
    "-moz-transform": "rotateY(" + currdeg + "deg)",
    "-o-transform": "rotateY(" + currdeg + "deg)",
    "transform": "rotateY(" + currdeg + "deg)"
  });
}

html,
body {
  height: 100%;
  background-color: black;
}
body {
  margin: 0;
}
.wrapper {
  /* height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center; */
  margin: 0 auto;
  width: 250px;
  height: 250px;
  position: relative;
  perspective: 1000px;
}
#earth {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 500px;
  box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 500px;
  }
}
.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.item {
  top: 80px;
  left: 80px;
  display: block;
  position: absolute;
  background: #000;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}
.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(120deg) translateZ(200px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
}
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
}
.next,
.prev {
  color: #444;
  position: absolute;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 1px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover,
.prev:hover {
  color: #000;
}
.next:active,
.prev:active {
  box-shadow: 0 5px 0 #999;
}
.next {
  right: 5em;
}
.prev {
  left: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="earth"></div>
  <div class="carousel">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>