.scale_30 {
 transform: rotate(45deg); 
}
/*
@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(1, 1, 0, 360deg); }
}
*/
.cubesingle_270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.cubesingle_90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.cubesingle_180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.cubecontainer {
  width: 100px; 
  height: 100px;
  perspective: 250px;
  margin: 50px;
}
.cube {
  width: 100px; 
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: turn 5s linear infinite;
  /*animation: none;*/
/*transform: rotate3d(0);show front
transform: rotate3d(2, -1, -1, -0.2turn); show top, left and front
transform: rotate3d(1, 1, 0, 30deg);show front, left and bottom
transform: rotate3d(1, 1, 0, 45deg);show front, left and bottom
transform: rotate3d(1, 1, 0, 78deg);show left and bottom
transform: rotate3d(0, 1, 0.5, 3.142rad); show back, buttom
transform: rotate3d(1, 1, 0, 70deg) show left bottom, front
transform: rotate3d(0, 1, 0, 45deg); show left and front
transform: rotate3d(0, 1, 0, 90deg); show left
transform: rotate3d(0, 1, 0, 270deg); show right
transform: rotate3d(0, 1, 0, 299deg); show right and front
transform: rotate3d(0, 1, 0, 135deg); show left and back
transform: rotate3d(0, 1, 0, 359deg); show front
transform: rotate3d(0, 1, 0, 180deg); show back
*/
}
.cubeface {
  width: 100px;
  height: 100px;
  background: skyblue;
  border: 1px solid black;
  position: absolute;
  opacity: 1.0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  /*transition: transform 500ms;*/
}
.cubefront {
  transform: translateZ(50px);
}
.cubeback {
  transform: translateZ(-50px) rotateY(180deg);
}
.cubeleft {
  transform: translateX(-50px) rotateY(-90deg);
}
.cuberight {
  transform: translateX(50px) rotateY(90deg);
}
.cubetop {
  transform: translateY(-50px) rotateX(90deg);
}
.cubebottom {
  transform: translateY(50px) rotateX(-90deg);
}
/*
@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
    transform: rotate3d(1, 1, 0, 45deg);
  }
}
*/

.cuberollingarrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.cuberollingright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.cuberollingleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.cuberollingup {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.cuberollingdown {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}