Rotate planet

by Andrey Izman

HTML

<div class="margin">
<div class="crown1">
</div>
<div class="crown2">
</div>
<div class="crown34">
</div>
<div class="planet">
</div>
</div>

SCSS

* {
  box-sizing: padding-box;
}

$k: 1.09;
$sz: 216px * $k;
$p1: 34px * $k;
$p2: 18px * $k;
$p3: 19px * $k;
$p4: $p1;

.margin {
  margin: 200px auto;
  width: $sz + $p1*2;
  height: $sz + $p1*2;
}

.planet {
  background: #000;
  border-radius: 100%;
  overflow: hidden;
  width: $sz;
  height: $sz;
  position: absolute;
  z-index: 100;
  margin: 0;
}

.crown3 {
  width: $sz;
  height: $sz;
  position: absolute;
  border-radius: 100%;
  padding: $p3;
  margin-top: -$p3;
  margin-left: -$p3;
  background: orange;
  /* background: red; */
}

.crown1, .crown2, {
  width: $sz;
  height: $sz;
  position: absolute;
  border-radius: 100%;
  padding: $p2 - 2 $p1 $p2 - 2 $p1;
  margin-top: -$p2 + 4;
  margin-left: -$p1;
  background: orange;
}
.crown2 {
  padding: $p2 $p4 $p2 $p4;
  margin-top: -$p2;
  margin-left: -$p4;
  background: orange;
}

$d: 0.65;
.crown1 {
  animation: rotate1 11s *$d linear infinite;
}
.crown2 {
  /* animation: rotate2 12.3s *$d linear infinite; */
  /* background: blue; */
}

@keyframes rotate1 {
  to { transform: rotate(-360deg); }
}

@keyframes rotate2 {
  20% { transform: rotate(-110deg); }
  to { transform: rotate(-330deg); }
}