<input id="rotation-checkbox" type="checkbox" class="rotator"> <label for="rotation-checkbox">rotate</label>
<br>
<section role="region" area-hidden="true" class="flower">
  <div class="flower-leaf leaf-1"></div>
  <div class="flower-leaf leaf-2"></div>
  <div class="flower-leaf leaf-3"></div>
  <div class="flower-leaf leaf-4"></div>
  <div class="flower-leaf leaf-5"></div>
  <div class="flower-core"></div>
</section>

.flower {
  width: 200px;
  height: 200px;
  position: relative;
}


.flower > .flower-leaf {
  width: 50%;
  height: 50%;
  position: absolute;
  border-radius: 60%;
  background-color: transparent;
  overflow: hidden;
  top: 0;
  left: 12.5%;
}

.flower > .flower-leaf:after {
  content: ' ';
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 60%;
  position: relative;
  left: 50%;
}

.flower > .leaf-1 {
  transform-origin: 0 0;
  transform: rotate(0deg);
}

.flower > .leaf-2 {
  transform-origin: 75% bottom;
  transform: rotate(72deg);
}

.flower > .leaf-3 {
  transform-origin: 75% bottom;
  transform: rotate(144deg);
}

.flower > .leaf-4 {
  transform-origin: 75% bottom;
  transform: rotate(216deg);
}

.flower > .leaf-5 {
  transform-origin: 75% bottom;
  transform: rotate(288deg);
}

.flower > .flower-core {
  position: absolute;
  width: 5%;
  height: 5%;
  background-color: black;
  /* the vertical center of core is at the bottom of leaf-1, so top is 50% - 2.5% = 47.5% */
  top: 47.5%;
  /* the horizontal center of core is at the 3/4 of leaf-1, so it is 50% * 3 / 4 - 2.5% = 37.5% - 2.5% = 35% */
  left: 47.5%;
  border-radius: 60%;
}

.rotator:checked ~ .flower {
  animation: rotate 4s linear infinite;
  animation-play-state: play;
}

.rotator ~ .flower {
  animation: rotate 4s linear infinite;
  animation-play-state: paused;
}


@keyframes rotate {
  100% { transform: rotate(360deg); } 
}