/* .rotate1{
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
} */
/* demo: https://codepen.io/mrosati84/pen/kWwXLg */

#cube-3d-container {
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  perspective: 500px;
  -moz-perspective: 1000px;
  padding: 25px;
}

#cube3d {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0,1.32,0,.92);
}

#cube3d div {
  display: block;
  border: none;
  line-height: var(--cube-size);
  text-align: center;
  font-size: 65px;
}

.cube-sides {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);

  text-decoration: underline;
  text-underline-offset: 24px;
}

/* #front {
} */
/*
#back {
  background: var(--cube-color);
}

#right {
  background: var(--cube-color);
}

#left {
  background: var(--cube-color);
}

#top {
  background: var(--cube-color);
}

#bottom {
  background: var(--cube-color);
} */

#cube3d #front  {
  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
}
#cube3d #back {
  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
}
#cube3d #right  {
  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
}
#cube3d #left   {
  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
}
/* #cube3d #top    {
  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
}
#cube3d #bottom {
  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
} */