CodePen Embed - CSS Pastel Rubik's Cube

<body>
  <div class="box-canvas">
    <div class="cube">
      <div class="side back"></div>
      <div class="side left"></div>
      <div class="side right"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side front"></div>
  </div>
  </div>
</body>

:root {
  --background-color: #E1CAF9;
  --blue: #B5D1EC;
  --red: #F98690;
  --yellow: #F9F7B5;
  --orange: #F9D4BC;
  --white: #F8F8F8;
  --green: #B0E4D2;
  --in-between-color: #767C87;
}

body{
  background: var(--background-color);
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 600px;
  height:600px;
  background: var(--background-color);
  perspective: 800px;
}

@keyframes rotateCube {
  0% {
    transform: rotateX(0) rotateY(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  position:relative;
  margin: auto;
  margin-top: 200px;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotateCube 10s infinite;
}

.side {
  position: absolute;
  width: 200px;
  height: 200px;
}

.side::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  transform: rotate(90deg);
  background: repeating-linear-gradient(to right, var(--in-between-color)  0, var(--in-between-color)  2px, transparent 2px, transparent 66px, var(--in-between-color) 66px, var(--in-between-color) 68px, transparent 68px, transparent 132px, var(--in-between-color) 132px);
}

.back {
  transform: translateZ(-100px);
  background: repeating-linear-gradient(to right, var(--in-between-color) 0, var(--in-between-color) 2px, var(--blue) 2px, var(--blue)  66px, var(--in-between-color) 66px, var(--in-between-color) 68px, var(--blue) 68px, var(--blue) 132px, var(--in-between-color) 132px);
}


.left {
  transform: translateX(-100px) rotateY(90deg);
   background: repeating-linear-gradient(to right, var(--in-between-color)  0, var(--in-between-color)  2px, var(--yellow) 2px, var(--yellow)  66px, var(--in-between-color) 66px, var(--in-between-color)  68px, var(--yellow) 68px, var(--yellow) 132px, var(--in-between-color)  132px);
}



.right {
  transform: translateX(100px) rotateY(90deg);
   background: repeating-linear-gradient(to right, var(--in-between-color)  0, var(--in-between-color) 2px, var(--red) 2px, var(--red)  66px, var(--in-between-color)  66px, var(--in-between-color) 68px, var(--red) 68px, var(--red) 132px, var(--in-between-color) 132px);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
   background: repeating-linear-gradient(to right, var(--in-between-color) 0, var(--in-between-color) 2px, var(--green) 2px, var(--green) 66px, var(--in-between-color) 66px, var(--in-between-color)  68px, var(--green)  68px, var(--green) 132px, var(--in-between-color) 132px);
}

.bottom {
  transform: translateY(100px) rotateX(90deg);
   background: repeating-linear-gradient(to right, var(--in-between-color) 0, var(--in-between-color) 2px, var(--white) 2px, var(--white) 66px, var(--in-between-color) 66px, var(--in-between-color)  68px, var(--white)  68px, var(--white) 132px, var(--in-between-color) 132px);
}

.front {
  transform: translateZ(100px);
   background: repeating-linear-gradient(to right, var(--in-between-color) 0, var(--in-between-color) 2px, var(--orange) 2px, var(--orange) 66px, var(--in-between-color) 66px, var(--in-between-color) 68px, var(--orange) 68px, var(--orange) 132px, var(--in-between-color)  132px);
}

This Pen is owned by Suzanne Aitchison on CodePen.

See more by @aitchiss on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.