<article class="cubed-2"></article>

body {
  --b: #beeeef;
  background: var(--b);
}

@keyframes rotate {
  0%, 100% { transform: translate(-50%, -50%) perspective(1000px) rotate3d(1,0,0, 60deg) rotate3d(0,0,1, 40deg); }
  50% {transform: translate(-50%, -50%) perspective(1000px) rotate3d(1,0,0, 60deg) rotate3d(0,0,1, 45deg);}
}

.cubed-2 {
  --hair: #963;
  --hair-semi: #8c5c2a;
  --hair-dark: #852;
  --skin: #fca;
  --skin-dark: #eb9;
  --skin-semi: #da8;
  animation: rotate 4s infinite;
  width: 20vmin;
  height: 20vmin;
  background: var(--hair-semi);
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(1000px) rotate3d(1,0,0, 60deg) rotate3d(0,0,1, 45deg);
  transform-style: preserve-3d;
}

.cubed-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(var(--skin-semi) 0 0) 50% 65% / 10% 15%,
    linear-gradient(var(--skin-dark) 0 0) 55% 60% / 25% 40%,
    linear-gradient(var(--hair-dark) 12.5%, #0000 0),
    linear-gradient(var(--hair-dark) 0 0) 100% 0 / 75% 50%,
    linear-gradient(var(--hair-dark) 0 0) 100% 0 / 55% 100%,
    var(--skin-dark);
  background-repeat: no-repeat;
  transform-origin: 0 50%;
  transform: rotateX(-90deg) rotateY(90deg) translate(-50%, 50%);
  box-shadow:
    /* sleeve */
    -5vmin 15vmin 0 -8vmin #fff,
    -5vmin 19vmin 0 -8vmin #fff,
    -5vmin 23vmin 0 -8vmin #fff,
    -5vmin 27vmin 0 -8vmin var(--skin-dark),
    /* shirt */
    -5vmin 15vmin 0 -5vmin #eee,
    -5vmin 18vmin 0 -5vmin #eee,
    /* belt */
    -5vmin 20vmin 0 -5vmin #420,
    /* pants */
    -5vmin 29vmin 0 -5vmin #258,
    -5vmin 35vmin 0 -5vmin #258,
    -5vmin 39vmin 0 -5vmin #222
    ;
}


.cubed-2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(#000 0 0) 50% 85% / 30% 5%,
    linear-gradient(var(--hair) 0 0) 20% 30% / 25% 5%,
    linear-gradient(var(--hair) 0 0) 80% 30% / 25% 5%,
    linear-gradient(#000 0 0) 25% 55% / 10% 10%,
    linear-gradient(#000 0 0) 75% 55% / 10% 10%,
    linear-gradient(#fff 0 0) 20% 50% / 20% 20%,
    linear-gradient(#fff 0 0) 80% 50% / 20% 20%,
    linear-gradient(var(--skin-semi) 0 0) 50% 55% / 10% 20%,
    linear-gradient(var(--skin-semi) 0 0) 50% 65% / 15% 15%,
    linear-gradient(var(--hair) 12.5%, #0000 0),
    var(--skin)
    ;
  background-repeat: no-repeat;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  box-shadow:
    /* buttons */
    5vmin 12vmin 0 -9.5vmin #0003,
    5vmin 16vmin 0 -9.5vmin #0003,
    5vmin 20vmin 0 -9.5vmin #0003,
    /* shirt */
    5vmin 15vmin 0 -5vmin #fff,
    5vmin 18vmin 0 -5vmin #fff,
    /* belt */
    5vmin 24vmin 0 -9.5vmin #630,
    5vmin 24vmin 0 -9vmin #ccc,
    5vmin 20vmin 0 -5vmin #630,
    /* pants */
    5vmin 25vmin 0 -5vmin #369,
    8vmin 32vmin 0 -8vmin #369,
    2vmin 32vmin 0 -8vmin #369,
    8vmin 35vmin 0 -8vmin #369,
    2vmin 35vmin 0 -8vmin #369,
    8vmin 38vmin 0 -8vmin #369,
    2vmin 38vmin 0 -8vmin #369,
    8vmin 42vmin 0 -8vmin #333,
    2vmin 42vmin 0 -8vmin #333,
    /* correction */ 8vmin 31.5vmin 0 -8vmin #369, 2vmin 31.5vmin 0 -8vmin #369,
    /* fake 3d :( */
    2.2vmin 37.7vmin 0 -8vmin #258,
    2.4vmin 37.4vmin 0 -8vmin #258,
    2.6vmin 37.1vmin 0 -8vmin #258,
    2.8vmin 36.8vmin 0 -8vmin #258,
    3.0vmin 36.5vmin 0 -8vmin #258,
    3.2vmin 36.2vmin 0 -8vmin #258,
    3.4vmin 35.9vmin 0 -8vmin #258,
    3.6vmin 35.6vmin 0 -8vmin #258,
    3.8vmin 35.3vmin 0 -8vmin #258,
    4.9vmin 35.0vmin 0 -8vmin #258,
    3.6vmin 32.6vmin 0 -8vmin #258,
    3.8vmin 32.3vmin 0 -8vmin #258,
    4.9vmin 32.0vmin 0 -8vmin #258,
    2.2vmin 41.7vmin 0 -8vmin #222,
    2.4vmin 41.4vmin 0 -8vmin #222,
    2.6vmin 41.1vmin 0 -8vmin #222,
    2.8vmin 40.8vmin 0 -8vmin #222,
    3.0vmin 40.5vmin 0 -8vmin #222,
    3.2vmin 40.2vmin 0 -8vmin #222,
    3.4vmin 39.9vmin 0 -8vmin #222,
    3.6vmin 39.6vmin 0 -8vmin #222,
    3.8vmin 39.3vmin 0 -8vmin #222,
    4.9vmin 39.0vmin 0 -8vmin #222,
    0 0 0 #0000
    ;
}