#moc-3dbox {
  position:relative;
  bottom:-161px;
  display:flex;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  transform: rotate3d(0, 1, 0, 0deg);
  z-index: 1;
  visibility:hidden;
}
#moc-3dbox:hover{
  animation: rotate .5s linear;
}

.moc-3dbox-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 30px;
  color: white;
}

.moc-3dbox-front {
  transform: translateZ(35px);
  background: url(../images/moc-store-box-04.png);
  animation-delay: 5s;
}

.moc-3dbox-back {
  transform: rotateY(180deg) translateZ(35px);
  background: url(../images/moc-store-box-04.png);
  animation-delay: 5s;
}

.moc-3dbox-right {
  transform: rotateY(90deg) translateZ(35px);
  background: url(../images/moc-store-box-01.png);
  animation-delay: 5s;
}

.moc-3dbox-left {
  transform: rotateY(-90deg) translateZ(35px);
  background: url(../images/moc-store-box-01.png);
  animation-delay: 5s;
}

.moc-3dbox-top {
  transform: rotateX(90deg) translateZ(35px);
  background: rgb(244 67 54 / 1);
}

.moc-3dbox-bottom {
  transform: rotateX(-90deg) translateZ(35px);
  background: rgb(244 67 54 / 1);
}

@keyframes clockwise {
1%,32% { transform: rotate3d(0, 1, 0, -90deg); }
33%,66% { transform: rotate3d(0, 1, 0, -180deg);}
67%,99% { transform: rotate3d(0, 1, 0, -270deg); }
100% { transform: rotate3d(0, 1, 0, -360deg); }
}

@keyframes rotate {
from { transform: rotate3d(0, 1, 0, 0deg); }
to { transform: rotate3d(0, 1, 0, -360deg); }
}

#transform-content { 
  position: relative;
  top: -60px;
  display: flex;
  align-items: center;
  width: 650px;
  height: 100px;
  font-family: 'Omnes';
  font-size: 25pt;
  letter-spacing: 3pt;
  animation-delay: 5s;
  justify-content: center;
  opacity:0;
}