SOURCE

<div class="cube">
		<div class="plane plane1">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
		<div class="plane plane2">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
		<div class="plane plane3">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
		<div class="plane plane4">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
		<div class="plane plane5">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
		<div class="plane plane6">
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
			<div class="ind"></div>
		</div>
	</div>

.cube {
    margin: 300px;
    transform-style: preserve-3d;
    animation: alternate infinite cube 3s;
    animation-iteration-count: infinite;
  }
  .plane {
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: rgb(233, 80, 10);
    opacity: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .plane4 {
    transform: translateZ(100px);
    background-color: rgb(7, 248, 59);
  }
  .plane1 {
    transform: translateZ(-100px);
    background-color: rgb(245, 77, 10);
  }
  .plane2 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: rgb(10, 177, 243);
  }
  .plane3 {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: rgb(17, 1, 3);
  }
  .plane5 {
    transform: rotateX(-90deg) translateZ(-100px);
    background-color: rgb(243, 7, 231);
  }
  .plane6 {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: rgb(9, 13, 248);
  }
  @keyframes cube {
    0% {
      transform: rotate3d(1, 1, 1, -45deg);
    }
    100% {
      transform: rotate3d(1, 1, 1, -180deg);
    }
  }
  .ind{
    border: 2px solid rgb(255, 255, 255);
    border-radius: 5px;
}