<div class="dice-box">
  <div class="dice first-face">
    <span class="dot"></span>
  </div>
  <div class="dice second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="fifth-face dice">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="dice sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
</div>

body{
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;
  box-sizing: border-box;
  opacity: 0.7;
  background-color: tomato;
  position: absolute;
}

.dot {
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: white;
}
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}
.second-face {
   display: flex;
   justify-content : space-between;
}
.second-face .dot:nth-of-type(2) {
  align-self: flex-end;
}
.third-face {
  display: flex;
  justify-content : space-between;
}

.third-face .dot:nth-of-type(2) {
  align-self: center;
}

.third-face .dot:nth-of-type(3) {
  align-self: flex-end;
}
.fourth-face {
  display: flex;
  justify-content: space-between
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face {
  display: flex;
  justify-content: space-between
}

.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}
.sixth-face {
  display: flex;
  justify-content: space-between
}
  
.sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dice-box {
  width: 200px;
  height: 200px;
  margin: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
}
.first-face {
  transform: translateZ(100px);
}
.sixth-face {
  transform: translateZ(-100px);
}
.second-face {
  transform: translateX(-100px) rotateY(-90deg);
}
.fifth-face {
  transform: translateX(100px) rotateY(90deg);
}
.third-face {
  transform: translateY(100px) rotateX(90deg);
}
.fourth-face {
  transform: translateY(-100px) rotateX(90deg);
}
  
@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(45deg) rotateZ(45deg);
  }
  to {
    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);
  }
}

.dice-box {
  animation: rotate 5s linear infinite;
}