Rotate planet

by Andrey Izman

HTML

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

SCSS

* {
  box-sizing: padding-box;
}

$k: 1.09;
$sz: 216px * $k;
$p2: 20px * $k;
$p1: $p2 * 1.6;
$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;
}

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

.crown1 {
  animation: rotate1 6.5s linear infinite;
}

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