.circle {
  position: relative;
  width: 28ch;
  height: 28ch;
  border: 1px solid red;
  margin: -1lh auto;

  transform-style: preserve-3d;

  animation: twirl 5s linear infinite;
  --direction: -1;
}

.circle seg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
}

.circle seg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
}


@keyframes twirl {
  from { transform: rotateX(0deg) rotateZ(0turn) }
  to { transform:  rotateX(0deg) rotateZ(calc(1turn * var(--direction))) }
}

@keyframes counter-twirl {
  from { transform: rotate(0turn) }
  to { transform: rotate(calc(-1turn * var(--direction))) }
}

#turnabout-2 {
  --direction: 1;
}