* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(limegreen, royalblue);
  display: -ms-grid;
  display: grid;
  place-content: center;
  place-items: center;
  position: relative; }

.form {
  position: absolute;
  left: 20px;
  top: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }
  .form label {
    font-size: 25px;
    font-weight: bold;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  .form input {
    height: 25px;
    width: 25px;
    margin-left: 10px; }
  .form--show-face {
    top: unset;
    bottom: 20px;
    left: 20px; }

.container {
  position: relative; }
  .container .arrow {
    position: absolute;
    font-size: 40px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .container .arrow--left {
      left: -40px;
      top: 50%;
      transform: translateY(-50%); }
    .container .arrow--right {
      right: -40px;
      top: 50%;
      transform: translateY(-50%); }
    .container .arrow--up {
      top: -45px;
      left: calc(100%/4 + 95px); }
    .container .arrow--down {
      bottom: -40px;
      left: calc(100%/4 + 95px); }
    .container .arrow--around-top {
      left: 150px;
      top: 150px; }
    .container .arrow--around-bottom {
      left: 450px;
      top: 450px; }
  .container .cube {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    grid-gap: 20px;
    grid-template-areas: ". up . ."
 "left front right back"
 ". down . ."; }
    .container .cube__face {
      position: relative;
      width: 200px;
      height: 200px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr 1fr;
          grid-template-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr;
      place-items: stretch;
      background: rgba(0, 0, 0, 1);
      grid-gap: 2px;
      border: 2px solid black; }
      .container .cube__face div {
        display: -ms-grid;
        display: grid;
        place-items: center;
        font-weight: bold;
        font-size: 42px; }
      .container .cube__face--front {
        grid-area: front; }
      .container .cube__face--right {
        grid-area: right; }
      .container .cube__face--back {
        grid-area: back; }
      .container .cube__face--left {
        grid-area: left; }
      .container .cube__face--up {
        grid-area: up; }
      .container .cube__face--down {
        grid-area: down; }
  .container.threedimensional {
    width: 200px;
    height: 200px;
    perspective: 600px; }
    .container.threedimensional .arrow {
      position: absolute;
      font-size: 40px;
      cursor: pointer; }
      .container.threedimensional .arrow--left {
        left: -70px;
        top: 50%;
        transform: translateY(-50%); }
      .container.threedimensional .arrow--right {
        right: -70px;
        top: 50%;
        transform: translateY(-50%); }
      .container.threedimensional .arrow--up {
        top: -75px;
        left: 50%;
        transform: translateX(-50%); }
      .container.threedimensional .arrow--down {
        bottom: -70px;
        left: 50%;
        transform: translateX(-50%); }
      .container.threedimensional .arrow--around-top {
        left: -70px;
        top: -70px; }
      .container.threedimensional .arrow--around-bottom {
        left: unset;
        top: unset;
        right: -70px;
        bottom: -70px; }
    .container.threedimensional .cube {
      position: absolute;
      display: block;
      transform-style: preserve-3d;
      transform: translateZ(-100px) rotateX(-20deg) rotateY(30deg); }
      .container.threedimensional .cube__face {
        position: absolute; }
        .container.threedimensional .cube__face--front {
          z-index: 10;
          opacity: 0.9;
          grid-area: front;
          transform: rotateY(0deg) translateZ(100px); }
          .container.threedimensional .cube__face--front div {
            background: rgba(255, 0, 0, 0.7); }
        .container.threedimensional .cube__face--right {
          grid-area: right;
          transform: rotateY(90deg) translateZ(100px); }
          .container.threedimensional .cube__face--right div {
            background: blue; }
        .container.threedimensional .cube__face--back {
          grid-area: back;
          transform: rotateY(180deg) translateZ(100px); }
          .container.threedimensional .cube__face--back div {
            background: orange; }
        .container.threedimensional .cube__face--left {
          grid-area: left;
          transform: rotateY(-90deg) translateZ(100px); }
          .container.threedimensional .cube__face--left div {
            background: green; }
        .container.threedimensional .cube__face--up {
          grid-area: up;
          transform: rotateX(90deg) translateZ(100px); }
          .container.threedimensional .cube__face--up div {
            background: white; }
        .container.threedimensional .cube__face--down {
          grid-area: down;
          transform: rotateX(-90deg) translateZ(100px); }
          .container.threedimensional .cube__face--down div {
            background: yellow; }
      .container.threedimensional .cube.rotate .cube__face--front {
        grid-area: front;
        transform: rotateY(30deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--front div {
          background: red; }
      .container.threedimensional .cube.rotate .cube__face--right {
        grid-area: right;
        transform: rotateY(120deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--right div {
          background: blue; }
      .container.threedimensional .cube.rotate .cube__face--back {
        grid-area: back;
        transform: rotateY(210deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--back div {
          background: orange; }
      .container.threedimensional .cube.rotate .cube__face--left {
        grid-area: left;
        transform: rotateY(-60deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--left div {
          background: green; }
      .container.threedimensional .cube.rotate .cube__face--up {
        grid-area: up;
        transform: rotateX(120deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--up div {
          background: white; }
      .container.threedimensional .cube.rotate .cube__face--down {
        grid-area: down;
        transform: rotateX(-60deg) translateZ(100px); }
        .container.threedimensional .cube.rotate .cube__face--down div {
          background: yellow; }
  .container.bhidden .arrow--right {
    right: 180px;
    top: 50%;
    transform: translateY(-50%); }
  .container.bhidden .cube__face--back {
    visibility: hidden !important; }

.cube.is-spinning {
  animation: spinCube 8s infinite ease-in-out; }

@keyframes spinCube {
  0% {
    transform: translateZ(-100px) rotateX(0deg) rotateY(0deg); }
  100% {
    transform: translateZ(-100px) rotateX(360deg) rotateY(360deg); } }