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();
});