Cube 3D responsive version mobile

Bonjour à tous,
Je suis débutante en css/javascript et je travaille sur l'intégration d'un cube en 3D qui soit responsive. L'idée est que le cube réagisse aux touches du clavier pour les écrans d'ordinateur, et qu'il soit tactile pour les écrans mobiles/tablettes.

Pour des raisons techniques, j'ai commencé par intégrer le cube pour les écrans d'ordinateur (au delà de 640px). Tout est ok à ce niveau.
Le problème vient pour la version mobile : je n'arrive pas à trouver de calcul qui réduise la taille du cube pour la version mobile. J'ai essayé différentes combinaisons dans la partie CSS, mais ça ne fait pas effet et le cube garde la taille de la version pour écran de plus de 640px.

Voici le code pour les écrans de plus de 640px :

1. La partie html

<div id="experiment">
  <div id="cube" class="show-front">
    <div class="face one">
      Face 1
    </div>
    <div class="face two">
      Face 2

    </div>
    <div class="face three">
      Face 3
    </div>
    <div class="face four">
      Face 4
    </div>
    <div class="face five">Face 5

    </div>
    <div class="face six">Face 6
    </div>
  </div>

2. La partie CSS

#experiment {
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective: 800px;
  -moz-perspective-origin: 50% 200px;
  perspective: 800px;
  perspective-origin: 50% 200px;
}

#cube {
  position: relative;
  margin: 100px auto;
  height: 400px;
  width: 400px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  background-color: white;
  line-height: 1em;
  color: black;
  border: 1px solid black;
  border-radius: 3px;
  font-size: 25px;
  font-family: "Cormorant Garamond", serif;
}

#cube .one {
  -webkit-transform: rotateX(90deg) translateZ(200px);
  -moz-transform: rotateX(90deg) translateZ(200px);
  transform: rotateX(90deg) translateZ(200px);
}

#cube .two {
  -webkit-transform: translateZ(200px);
  -moz-transform: translateZ(200px);
  transform: translateZ(200px);
  background-color: black;
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  -moz-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
  font-size: 30px;
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(200px);
  -moz-transform: rotateY(180deg) translateZ(200px);
  transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
  -moz-transform: rotateY(-90deg) translateZ(200px);
  transform: rotateY(-90deg) translateZ(200px);
  font-size: 15px;
}

#cube .six {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

J'ai essayé de nombreuses manipulations mais ça ne fonctionne pas et je bloque complètement.
Merci de votre aide.