<button class="play">Play</button>
<button class="pause">Pause</button>
<button class="stop">Stop</button>
<button class="faster">Faster</button>
<button class="slower">Slower</button>

<div class="container">
  <div class="box a"></div>
</div>

<p class="data">Speed: 1</p> 
body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
  font-size: 1.3em;
  text-align: center;
}

.box {
  width: 80px;
  height: 80px;
  margin: 0px auto;
  margin-top: 150px;
}

.a {
  background: white;
  border-left: 10px double red;
  border-right: 10px double black;
}

.container {
  perspective: 100px;
}

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

.data {
  background: black;
  color: white;
  display: inline-block;
  position: absolute;
  border-radius: 5px;
  left: 20px;
  padding: 10px;
}
var speed = 1;

var htmlA = new mojs.Html({
  el: ".a",
  angleZ: {
    0: 720
  },
  borderRadius: {
    0: '50%'
  },
  borderWidth: {
    10: 100
  },
  duration: 2000,
  repeat: 9999,
  isYoyo: true
});

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

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

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

document.querySelector(".faster").addEventListener("click", function() {
  speed = speed + 1;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});

document.querySelector(".slower").addEventListener("click", function() {
  speed = speed/2;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js