JSFiddle - React, Tailwind, and code Playground

HTML

<div>Text</div>
<pre></pre>

<input type="number" value="1" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.001">
<br>
<input type="number" value="0" step="0.1">
<input type="number" value="1" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.001">
<br>
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="1" step="0.1">
<input type="number" value="0" step="0.1">
<br>
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="0" step="0.1">
<input type="number" value="1" step="0.1">

CSS

div {
    width: 100px;
    height: 100px;
    margin: 20px;
 background-image: url(http://d3hkmxvtl0lbof.cloudfront.net/vfr/engine/skinnable/v4/shared/image/page-end/chosen-size-bg.png);
}

input {
    width: 40px;
}

JavaScript

var $inputs = $('input');
var $div = $('div');
var $pre = $('pre');

$inputs.bind('change', function() {
    var parts = $inputs.map(function() { return this.value; }).get().join(', ');
    
    $div.css('-webkit-transform', 'matrix3d(' + parts + ')');
    $pre.text('matrix3d(' + parts + ')');
});