<div class="perspective">
  <div class="box">
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face back"></div>
    <div class="face front"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

body {
  margin: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

:root {
  --size: 100px;
}

.perspective {
  position: relative;
  perspective: 800px;
  perspective-origin: 50% -200px;
}

.box {  
  width: var(--size);
  aspect-ratio: 1;  

  position: relative;
  transform-style: preserve-3d;
  
  transform-origin: 50px bottom -50px;
  animation: rotate 4s linear infinite;
}

.face {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  
  background-color: hsl(
    39,
    100%,
    66%
  );
  
  transform-style: preserve-3d;
}

.face.front {
}

.face.bottom {
  top: 100%;
}

.face.top {
  bottom: 100%;
}

.face.back {
  bottom: 200%;
}

.face.right {
  left: 100%;
}

.face.left {
  right: 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotateY(360deg);
  }
}