SOURCE

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="top"></div>
  <div class="bot"></div>
</div>

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.left {
  background: red;
  width: 50px;
  height: 100px;
  border-radius: 50px 0 0 50px;
  position: absolute;
  left: 0;
  top: 0;
  animation: rightToLeft 5s infinite linear;
  transform-origin: 100% 50%;
  z-index: 2;
}
@-webkit-keyframes rightToLeft {
	    0%   { -webkit-transform: perspective(200px) rotateY(0deg);background-color: #e63f35;}
	    49%  { -webkit-transform: perspective(200px) rotateY(90deg);background-color: #be271e;}
	    50%  { -webkit-transform: perspective(200px) rotateY(90deg);background-color: #dfa51b;}
	    100% { -webkit-transform: perspective(200px) rotateY(180deg);background-color: #fbd008;}
	}
.right {
  background: green;
  width: 50px;
  height: 100px;
  border-radius: 0 50px 50px 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.top {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fbd008;
  z-index: 0;
  border-radius: 50px 50px 0 0;
}
.bot {
  width: 100px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fbd008;
  z-index: 0;
  border-radius: 0 0 50px 50px;
}