CodePen Embed - Only Css 3D Cube

<div class="container">
  <div class="flex">
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
  </div>
  <div class="flex">
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
  </div>
  <div class="flex">
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
  </div>
  <div class="flex">
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
    <div class="cube">
      <div class="wall front"></div>
      <div class="wall back"></div>
      <div class="wall left"></div>
      <div class="wall right"></div>
      <div class="wall top"></div>
      <div class="wall bottom"></div>
    </div>
  </div>
</div>

/* basic style */
html,
body {
  position: relative;
  overflow: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #222, #000);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 -80px 0 0;
}

/* cube */
.cube {
  position: relative;
  width: 1px;
  height: 1px;
  margin: 0 80px 0 0;
  transform-style: preserve-3d;
}
.wall {
  width: 80px;
  height: 80px;
  position: absolute;
  left: calc(-80px / 2);
  top: calc(-80px / 2);
  text-align: center;
  line-height: 100px;
  border: solid 1px #fff;
}
.front {
  transform: translateZ(calc(80px / 2));
}
.back {
  transform: translateZ(calc(-80px / 2)) rotateY(180deg);
}
.right {
  transform: translateX(calc(80px / 2)) rotateY(90deg);
}
.left {
  transform: translateX(calc(-80px / 2)) rotateY(-90deg);
}
.top {
  transform: translateY(calc(-80px / 2)) rotateX(90deg);
}
.bottom {
  transform: translateY(calc(80px / 2)) rotateX(-90deg);
}

/* animation */

//first
.flex:nth-of-type(4) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;
}

//sec
.flex:nth-of-type(3) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
}

//third
.flex:nth-of-type(2) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}

//forth
.flex:nth-of-type(1) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}

//five
.flex:nth-of-type(1) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}

//six
.flex:nth-of-type(1) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}

//seven
.flex:nth-of-type(1) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards;
}

@keyframes rotation {
  100% {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

.wall{
  animation: color 2s linear 1.5s forwards;
}

@keyframes color {
  100% {
    background-color: #fff;
  }
}

View Compiled

This Pen is owned by Hisami Kurita on CodePen.

See more by @hisamikurita on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.