JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>
<div id="cube" class="">
    <figure class="front"></figure>
</div>
<button id="reset">Reset</button>
<button id="both180X">Rotate 180 in x</button>
<button id="both180Y">Rotate 180 in y</button>
<button id="both180Z">Rotate 180 in z</button>

CSS

figure {
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -moz-margin-after: 0;
    -moz-margin-before: 0;
    -moz-margin-start: 0;
    -moz-margin-end: 0;
    margin-after: 0;
    margin-before: 0;
    margin-start: 0;
    margin-end: 0;
}

#cube {
    -webkit-perspective: 4000px;
    -moz-perspective: 4000px;
    perspective: 4000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#cube, #cube figure {
    width: 420px;
    height: 420px;
    position: fixed;
    left: 50%;
    margin-left: -210px;
    top: 80px;
    -webkit-transform-origin-z: -210px;
    -moz-transform-origin-z: -210px;
    transform-origin-z: -210px;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
}

.front {
     background-color: red;  
    -webkit-transform: rotateX(0deg);   
     -moz-transform: rotateX(0deg);   
     transform: rotateX(0deg);
}

JavaScript

var generateRotationMatrix = function(x, y, z, tx, ty, tz) {
		var rotationXMatrix = $M([
					[1,0,0,0],
					[0, Math.cos( x), Math.sin( x), 0],
					[0, Math.sin(-x), Math.cos( x), 0],
					[0,0,0,1] 
				     ]);

		var rotationYMatrix = $M([
					[Math.cos( y), 0, Math.sin(-y), 0],
					[0,1,0,0],
					[Math.sin( y), 0, Math.cos( y), 0],
					[0,0,0,1]
				     ]);

		var rotationZMatrix = $M([
					[Math.cos( z), Math.sin( z), 0, 0],
					[Math.sin(-z), Math.cos( z), 0, 0],
					[0,0,1,0],
					[0,0,0,1]
				     ]);
        var a = x;
        var b = y;
        var c = z;
        
        rotationXMatrix = $M([
          [1,0,0,0],
          [0,Math.cos(a), Math.sin(-a), 0],
          [0,Math.sin(a), Math.cos( a), 0],
          [0,0,0,1]
        ])
        
        rotationYMatrix = $M([
          [Math.cos( b), 0, Math.sin(b),0],
          [0,1,0,0],
          [Math.sin(-b), 0, Math.cos(b), 0],
          [0,0,0,1]
        ])
        
        rotationZMatrix = $M([
          [Math.cos(c), Math.sin(-c), 0, 0],
          [Math.sin(c), Math.cos( c), 0, 0],
          [0,0,1,0],
          [0,0,0,1]
        ])

		var translationMatrix = $M([
  						[1,0,0,0],
  						[0,1,0,0],
  						[0,0,1,0],
  						[tx,ty,tz,1]
					   ]);
		var tM = rotationXMatrix
      		     .x(rotationYMatrix)
      		     .x(rotationZMatrix)
		     .x(translationMatrix);
		
		var s  = "matrix3d("
		s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + "," + tM.e(1,3).toFixed(10) + "," + tM.e(1,4).toFixed(10) + ","
		s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + "," + tM.e(2,3).toFixed(10) + "," + tM.e(2,4).toFixed(10) + ","
		s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10) + "," + tM.e(3,3).toFixed(10) + "," + tM.e(3,4).toFixed(10) + ","
		s += tM.e(4,1).toFixed(10) + "," + tM.e(4,2).toFixed(10) + "," + tM.e(4,3).toFixed(10) + "," + tM.e(4,4).toFixed(10)
		s += ")";
		return s;
	}
$("#both180X").click(function() {
   ...