JSFiddle - React, Tailwind, and code Playground
HTML
<button class="Animation">Stop-Animate</button>
<br><br><br>
<button id="button3D" class="cubespinner" >Mouvement</button>
CSS
@keyframes spincube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
JavaScript
$("#animation").click(function () {
$("#button3D").toggleClass("cubespinner");
//$("#button3D").addClass("cubespinner");
//$("#button3D").removeClass("cubespinner");
//$("#animation").attr("class","cubespinner");
//$("#animation").addClass('cubespinner');
//$("#button3D").removeClass("cubespinner1").addClass( "cubespinner" );
}