<button class="play">Play</button>
<div class="container">
  <div class="box a"></div>
</div>

body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
  font-size: 1.3em;
}

.box {
  width: 80px;
  height: 80px;
  background: red;
  margin-top: 40px;
  position: relative;
}

.container {
  perspective: 100px;
}

.play {
  background: orange;
  border: none;
  color: white;
  font-family: 'Lato';
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  margin: 10px;
  font-weight: 300;
}

var htmlA = new mojs.Html({
  el: ".a",
  x: { 
    0: 400,
    duration: 1000,
    repeat: 8,
    isYoyo: true
  },
  angleY: {
    0: 360,
    delay: 500,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  },
  angleZ: {
    0: 720,
    delay: 1000,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  }
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});