<div class="block">
  <div class="shape--container">
    <div class="shape">
      <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube earLeft">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube earRight">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>

      <div class="cube earLeftInner">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube earRightInner">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>

      <div class="cube eyeLeft">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube eyeRight">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube eyeLeftInner">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube eyeRightInner">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>

      <div class="cube eyeLitLeft">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube eyeLitRight">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube snout">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
      <div class="cube snoutMiddle">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>

    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.block {
  overflow: hidden;
}

.shape--container {
  transform: scale(0.75);
  width: 320px;
  height: 300px;
  margin: 150px auto;
  padding-left: 50px;
  perspective: 500px;
  perspective-origin: 200px calc(0% - 150px);
}

.shape {
  --color1: brown;
  --color2: black;
  --color3: pink;
  animation: shape 15s infinite linear;
  transform-style: preserve-3d;
  transform: rotateY(-45deg);

  @keyframes shape {
    0% {
      transform: rotateY(-30deg);
    }

    50% {
      transform: rotateY(30deg);
    }

    100% {
      transform: rotateY(-30deg);
    }
  }
}

.cube {
  --size: 200px;
  --color: var(--color1);
  transform-style: preserve-3d;
}

.face {
  transform-style: preserve-3d;
  position: absolute;
  width: var(--size);
  height: var(--size);
  backface-visibility: hidden;
}

.top {
  transform-style: preserve-3d;
  display: block;
  position: absolute;
  transform: scaleX(-1) rotateX(90deg) translateZ(calc(var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.right {
  transform: rotateY(90deg) translateZ(calc(var(--size) - var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.left {
  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.front {
  transform: rotateX(0deg) translateZ(calc(var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.back {
  transform: rotateX(-180deg) translateZ(calc(var(--size) - var(--size) / 2));
  background-color: var(--color);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2) inset;
}

.earLeft {
  --size: 100px;
  --color: var(--color1);
  transform: translateX(-50px) translateZ(-25px) translateY(-50px);
  scale: 1 1 0.5;
}

.earLeftInner {
  --size: 70px;
  --color: var(--color3);
  transform: translateX(-35px) translateZ(-5px) translateY(-35px);
  scale: 1 1 0.5;
}

.earRightInner {
  --size: 70px;
  --color: var(--color3);
  transform: translateX(165px) translateZ(-5px) translateY(-35px);
  scale: 1 1 0.5;
}

.earRight {
  --size: 100px;
  --color: var(--color1);
  transform: translateX(150px) translateZ(-25px) translateY(-50px);
  scale: 1 1 0.5;
}

.eyeLeft {
  --size: 40px;
  --color: white;
  transform: translateX(25px) translateZ(81px) translateY(50px);
}

.eyeRight {
  --size: 40px;
  --color: white;
  transform: translateX(135px) translateZ(81px) translateY(50px);
}

.eyeLitLeft {
  --size: 10px;
  --color: var(--color2);
  transform: translateX(113px) translateZ(100px) translateY(49px);
  scale: 5 1 1;
}

.eyeLitRight {
  --size: 10px;
  --color: var(--color2);
  transform: translateX(133px) translateZ(101px) translateY(49px);
  scale: 5 1 1;
}

.eyeLeftInner {
  --size: 20px;
  --color: var(--color2);
  transform: translateX(25px) translateZ(91px) translateY(70px);
  animation: eyeLeftInner 15s infinite linear;

  @keyframes eyeLeftInner {
    0% {
      transform: translateX(45px) translateZ(91px) translateY(70px);
    }

    50% {
      transform: translateX(25px) translateZ(91px) translateY(70px);
    }

    100% {
      transform: translateX(45px) translateZ(91px) translateY(70px);
    }
  }
}

.eyeRightInner {
  --size: 20px;
  --color: var(--color2);
  transform: translateX(155px) translateZ(91px) translateY(70px);
  animation: eyeRightInner 15s infinite linear;

  @keyframes eyeRightInner {
    0% {
      transform: translateX(155px) translateZ(91px) translateY(70px);
    }

    50% {
      transform: translateX(135px) translateZ(91px) translateY(70px);
    }

    100% {
      transform: translateX(155px) translateZ(91px) translateY(70px);
    }
  }
}

.snout {
  --size: 50px;
  --color: var(--color1);
  transform: translateX(92.5px) translateZ(110px) translateY(130px);
  scale: 2 1 1;
}

.snoutMiddle {
  --size: 50px;
  --color: var(--color2);
  transform: translateX(75px) translateZ(135px) translateY(115px);
}