JSFiddle - React, Tailwind, and code Playground

by bnickel

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;
    border-radius:50%;
    background-color: green;
}

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 + ')');
});