.container
  .cube
    .side.top
    .side.bottom
    .side.left
    .side.right
    .side.front
    .side.back
View Compiled
* {
  font-family: Helvetica, sans-serif;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.container {
  perspective: 900px;
}
.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(1turn);
  animation: turn 12s linear infinite;
  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    background: hotpink;
    &::before {
      content: '';
      background: rebeccapurple;
      width: 1rem;
      height: 100%;
      position: absolute;
      top: 0;
      left: calc(50% - 0.5rem);
    }
    &::after {
      content: '';
      background: rebeccapurple;
      width: 100%;
      height: 1rem;
      position: absolute;
      left: 0;
      top: calc(50% - 0.5rem);
    }
  }
  .front {
    transform: translateZ(5em);
  }
  .top {
    background: lighten(hotpink, 2%);
    transform: rotateX(90deg) translateZ(5em);
  }
  .right {
    transform: rotateY(90deg) translateZ(5em);
  }
  .left {
    transform: rotateY(-90deg) translateZ(5em);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(5em);
  }
  .back {
    transform: rotateY(-180deg) translateZ(5em);
  }
}

@keyframes turn {
  from {
    transform: rotateX(-5deg) rotateY(1turn);
  }
  to {
    transform: rotateX(-5deg) rotateY(0);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.